[英]Converting async/await function to ES5 equivalent
I'm in the process of rewriting an app that executes REST API calls in batches, for example 500 total calls executed 10 at a time.我正在重写一个分批执行 REST API 调用的应用程序,例如一次执行 500 个总调用 10 个。 I need assistance in downgrading my js function that uses ES6+ functions to an ES5 equivalent (basically no arrow functions or async/await).我需要帮助将使用 ES6+ 函数的 js 函数降级为等效于 ES5 的函数(基本上没有箭头函数或 async/await)。
In my original app that was used in environments that supported ES6+ functions (arrow functions, async/await etc.) my working function was as follows:在支持 ES6+ 函数(箭头函数、async/await 等)的环境中使用的原始应用程序中,我的工作函数如下:
Original function:原函数:
// Async function to process rest calls in batches
const searchIssues = async (restCalls, batchSize, loadingText) => {
const restCallsLength = restCalls.length;
var issues = [];
for (let i = 0; i < restCallsLength; i += batchSize) {
//create batch of requests
var requests = restCalls.slice(i, i + batchSize).map((restCall) => {
return fetch(restCall)
.then(function(fieldResponse) {
return fieldResponse.json()
})
.then(d => {
response = d.issues;
//for each issue in respose, push to issues array
response.forEach(issue => {
issue.fields.key = issue.key
issues.push(issue.fields)
});
})
})
// await will force current batch to resolve, then start the next iteration.
await Promise.all(requests)
.catch(e => console.log(`Error in processing batch ${i} - ${e}`)) // Catch the error.
//update loading text
d3.selectAll(".loading-text")
.text(loadingText + ": " + parseInt((i / restCallsLength) * 100) + "%")
}
//loading is done, set to 100%
d3.selectAll(".loading-text")
.text(loadingText + ": 100%")
return issues
}
The code I've written so far correctly batches up the rest calls in the first group of 10, for example, but I seem to be getting tripped up in resolving the Promise, so the for-loop can continue iterating.例如,到目前为止,我编写的代码正确地对第一组 10 个中的其余调用进行了批量处理,但我似乎在解析 Promise 时遇到了困难,因此 for 循环可以继续迭代。
My work-in-progress re-written function:我正在进行的重写功能:
//Async function process rest calls in batches
function searchIssues(restCalls, batchSize, loadingText) {
const restCallsLength = restCalls.length;
var issues = [];
for (var i = 0; i < restCallsLength; i += batchSize) {
//create batch of requests
var requests = restCalls.slice(i, i + batchSize).map(function(restCall) {
return fetch(restCall)
.then(function(fieldResponse) {
return fieldResponse.json()
})
.then(function(data) {
console.log(data)
response = data.issues;
//for each issue in respose, push to issues array
response.forEach(function(issue) {
issue.fields.key = issue.key
issues.push(issue.fields)
});
})
})
//await will force current batch to resolve, then start the next iteration.
return Promise.resolve().then(function() {
console.log(i)
return Promise.all(requests);
}).then(function() {
d3.selectAll(".loading-text")
.text(loadingText + ": " + parseInt((i / restCallsLength) * 100) + "%")
});
//.catch(e => console.log(`Error in processing batch ${i} - ${e}`)) // Catch the error.
}
//loading is done, set to 100%
d3.selectAll(".loading-text")
.text(loadingText + ": 100%")
return issues
}
My question is, once my 10 restCalls are completed, how can I then properly resolve the Promise and continue to iterate through the for-loop ?我的问题是,一旦我的 10 个 restCalls 完成,我该如何正确解析 Promise 并继续遍历 for 循环?
For reference, I've tried compiling the original function using Babel but it wouldn't compile in my Maven app, hence re-writing from scratch.作为参考,我尝试使用 Babel 编译原始函数,但它不会在我的 Maven 应用程序中编译,因此从头开始重写。
Without async/await
, you cannot pause your for
loop.没有async/await
,你不能暂停你的for
循环。 But you could reproduce that behavior by using a recursive function, calling itself after each batch of 10. Something along those lines (not tested) :但是你可以通过使用递归函数来重现这种行为,在每批 10 个之后调用自己。沿着这些路线的东西(未经测试) :
// Async function to process rest calls in batches
function searchIssues(restCalls, batchSize, loadingText) {
var restCallsLength = restCalls.length,
issues = [],
i = 0;
return new Promise(function(resolve, reject) {
(function loop() {
if (i < restCallsLength) {
var requests = restCalls
.slice(i, i + batchSize)
.map(function(restCall) {
return fetch(restCall)
.then(function(fieldResponse) {
return fieldResponse.json();
})
.then(function(d) {
var response = d.issues;
//for each issue in respose, push to issues array
response.forEach(issue => {
issue.fields.key = issue.key;
issues.push(issue.fields);
});
});
});
return Promise.all(requests)
.catch(function(e) {
console.log(`Error in processing batch ${i} - ${e}`);
})
.then(function() {
// No matter if it failed or not, go to next iteration
d3.selectAll(".loading-text").text(
loadingText + ": " + parseInt((i / restCallsLength) * 100) + "%"
);
i += batchSize;
loop();
});
} else {
// loading is done, set to 100%
d3.selectAll(".loading-text").text(loadingText + ": 100%");
resolve(issues); // Resolve the outer promise
}
})();
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.