异步函数在forEach循环中不会等待

Question

我在forEach循环中调用我的异步函数，代码如下所示：

foo {
    list.forEach(function( field ) {        
        populateValues( field );
    });

    // here my list is returned incomplete
    return list;
}

populateValues = async function ( field ) {
    if ( field.someProp === true ) {
        fields.val = await somePromise();
    }
}

somePromise = function() {
    return new Promise( resolve => {
        fetchMyAPIExample().then( function( value ) {
            resolve( value );
        }
    }
}

populateValues() 等待我的 Promise 正确返回，但是 foo() 没有等待 populateValues 返回完整的列表就返回了列表，导致列表不完整。

- Elzio Jr

---

无论如何，这里没有任何修改变量list的内容，所以仅仅纠正这个问题是不够的，你的列表还是原来的样子。我们还有一个对于未在此处声明的fields的引用。 - Kaddath

@kaddath 不，field.val = ... - Jonas Wilms

@Jonasw 我猜这就是原意，但这并不能真正帮助到他，因为他代码中的 field 是一个属性名称的字符串，而不是属性本身。但我想你在回答中已经纠正了。 - Kaddath

@kaddath 不是 jQuery 的 forEach。 - Jonas Wilms

啊，是的，你说得对^^ 以后应该注意这个！ - Kaddath

Answer 1

你可能也希望在那里等待，这不适用于forEach，但适用于for..of：

async function foo(){
  for(var field of list){        
    await populateValues( field );
  }
  return list
}

或者，如果您想启用竞赛模式：

function foo(){
  return Promise.all(
    list.map( field => populateValues( field ))
  ).then(_=>list);
}

- Jonas Wilms

Answer 2

由于每个对 populateValues() 函数的调用都是异步的，因此函数 foo 不会等待返回 list 对象。

您可以使 foo 等待 populateValues 的结果，以获得您期望的响应。

- ITDerrickH