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异步将使其等待直到得到响应后再继续。我在测试中添加了返回诺言的功能，以查看是否可以使其同步。

然后使用此方法的我的代码：

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 await。

考虑

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循环

使用标准承诺（堆叠它们）：

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

在Axios中半同步执行异步操作

1 个答案: