javascript - 在axios中半同步执行异步操作

Question

我有以下代码:

   * Fetch stats from api
   */
  fetchStats() {
    this._isFetching = true;
    // fetch stats after building url and replacing invalid characters
    return new Promise(async (resolve, reject) => {
      await API.fetchStats(this.rsn)
        .then(jres => {
          this.skills = jres.main.skills;
          this._isFetching = false;
          resolve('success');
        })
        .catch(err => {
          console.log(err);
          console.log('error retreiving stats');
          this._isFetching = false;
          reject('Failed to retreive stats');
        })
        .finally(() => {
          this._isFetching = false;
        });
    });
  }

我认为将其与await 异步会使其等到收到响应后再继续。返回 promise 是我在测试中添加的内容，看看是否可以使其同步。

然后我的代码使用这个方法:

memberCollection.forEach(async el => {
        await el.player.fetchStats()
        .then(() => {
          console.log(`Refreshed ${el.player.rsn}'s account`);
        })
        .catch(console.log(`Failed to refresh ${el.player.rsn}'s account`));
});

我的想法是，它会等到收到响应，然后 console.log 刷新成功或刷新失败。相反，我看到的是一大堆“成功”消息，后面跟着一串失败消息，表明它正在 foreach 中运行 then 和 catch 消息。有谁知道我如何才能完成这项工作。

我的问题是，如果我导航到 Axios 不断超时(我的猜测是，这是由于发送的请求数量以及从数据库中提取数据时存在 5-10 秒的延迟) API URL 手动它工作得很好，如果我只做一个成员(而不是 forEach)它工作得很好。所以我试图限制一次发出的请求数量。我尝试将 axios 超时设置为 10、20 和 60 秒，但没有任何改善。

解决方案代码:

const asyncForEach = async (arr, cb) => {
  for(let i=0;i<arr.length;i++) {
    let el = arr[i];
    try {
      let res = await cb(el);
    } catch (err) { console.log(err) };

    if(el.player && el.player.rsn) console.log(`Processed ${el.player.rsn}`);
  }
  console.log('done processing in asyncForEach');
}

Answer 1

未链接到 axios，而是链接到 async wait。

考虑

function slow(i){
    return new Promise((ok,ko)=>{
        return setTimeout(_=>ok(i), 1000)
    })
}
async function asyncForEach(arr, cb){
    for(var i = 0; i<arr.length; ++i){
        let el = arr[i];
        let res = await cb(el);
        console.log('async', res, new Date)
    }
}

/*
#foreach does not wait, but async and reduce are spaced by one second
foreach 4 2019-10-14T13:43:47.059Z
foreach 5 2019-10-14T13:43:47.071Z
foreach 6 2019-10-14T13:43:47.071Z
async 1 2019-10-14T13:43:47.071Z
async 2 2019-10-14T13:43:48.073Z
async 3 2019-10-14T13:43:49.074Z
reduce 7 2019-10-14T13:43:50.076Z
reduce 8 2019-10-14T13:43:51.078Z
reduce 9 2019-10-14T13:43:52.080Z
*/ 
async function main(){

    await [4,5,6].forEach(async el=>{
        let res = await slow(el);
        console.log('foreach', res, new Date)
    })
    await asyncForEach([1,2,3], slow);

    await [7,8,9].reduce((acc, el)=>acc.then(async _=>{
        let res = await slow(el);
        console.log('reduce', res, new Date);
        return;
    }), Promise.resolve())
}
main();

从时间戳中可以看出，forEach 不会等待 slow 完成但是，asyncForEach 在其迭代中确实等待

您可能想做的是

• 像使用 asyncForEach 一样编写 for 循环
• 使用标准 Promise(堆叠它们):

  [1,2,3].reduce((acc, el)=>acc.then(_=>{
      return slow(el);
  }), Promise.resolve())