为什么Promise.all()不能与async函数一起工作?

Question

我正在探索Promise.all()的使用，但我不知道为什么它没有给我预期的结果。我试着一步一步地说明它。

让我们看看我的代码:

var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, 'foo');
});

var apiCall = async () =>{
// to simulate a api call that will response after 5 sec 
setTimeout(() => {return 1000}, 5000); 

}
Promise.all([p2,p3,apiCall()]).then(values => {
console.log(values); // [3, 1337, undefine], but I expect  [3, 1337, 1000]
});
apiCall().then((response)=>{console.log(response)})

在我的理解中，async函数会立即返回一个Promise，这就是Promise。一切都将等待。

所以我想，

.then(values => {
console.log(values); // [3, 1337, undefined]
});

将在5秒后执行。

但是已经在2秒内输出如下，而不是[3,1337,1000]

undefined   
[ 1337, 'foo', undefined ]

我不知道问题出在哪里，我想

apiCall().then((response)=>{console.log(response)})

会给我"1000"而不是undefined

新编辑

---

收集了你们的答案后，我尝试了这个。

根据我的理解，setTimeout也是一个async，它会像任何其他承诺一样自动返回一个承诺。

所以，基于这种理解，我写了下面的代码。但这行不通。我理解使用承诺构造函数将解决问题。但是我不知道这个例子出了什么问题

var apiCall = async () =>{
// to simulate a api call that will response after 5 sec 
const a = setTimeout(() => {return 1000}, 5000); 
return a 
}

Answer 1

您的api调用没有正确返回值。尝试返回一个在超时

后解析的承诺

var apiCall = async () =>{
// to simulate a api call that will response after 5 sec 
return new Promise(resolve => {
setTimeout(() => {resolve(1000)}, 5000); 
});
}

Answer 2

简而言之，您没有做任何会使apiCall在解析承诺之前等待超时的事情。

var apiCall = async () =>{
// to simulate a api call that will response after 5 sec 
setTimeout(() => {return 1000}, 5000);    
}

1. 这是一个async函数，所以它返回一个promise。
2. 它首先调用setTimeout
3. 然后它到达最后没有击中return语句，因此将承诺解析为undefined
4. 5秒后超时结束，调用传递给setTimeout的函数。这个函数返回1000。setTimeout对回调的返回值不做任何处理。

---

要从回调API(如setTimeout)中获得承诺，您需要使用new Promise(正如您对p3所做的那样)。

async关键字仅在允许您使用await关键字时才有用。事实上，它使一个函数返回一个承诺应该被认为是使await工作所需的副作用。

await是管理现有承诺的工具。

Answer 3

您在apiCall中没有返回任何内容。当使用setTimeout时，指定一个回调函数，该函数将在给定时间后执行。你在回调中返回什么基本上不重要。

你应该让apiCall函数返回一个新的Promise，它在setTimeout回调中解析。