async
与 await
的使用方式相对简单。 蛤当你尝试在循环中使用await
时,事情就会变得复杂一些。
在本文中,分享一些在如果循环中使用await
值得注意的问题。
准备一个例子
对于这篇文章,假设你想从水果篮中获取水果的数量。
const fruitBasket = {
apple: 27,
grape: 0,
pear: 14
};
复制代码
你想从fruitBasket
获得每个水果的数量。 要获取水果的数量,可以使用getNumFruit
函数。
const getNumFruit = fruit => {
return fruitBasket[fruit];
};
const numApples = getNumFruit('apple');
console.log(numApples); //27
复制代码
现在,假设fruitBasket
是从服务器上获取,这里我们使用 setTimeout
来模拟。
const sleep = ms => {
return new Promise(resolve => setTimeout(resolve, ms))
};
const getNumFruit = fruit => {
return sleep(1000).then(v => fruitBasket[fruit]);
};
getNumFruit("apple").then(num => console.log(num)); // 27
复制代码
最后,假设你想使用await
和getNumFruit
来获取异步函数中每个水果的数量。
const control = async _ => {
console.log('Start')
const numApples = await getNumFruit('apple');
console.log(numApples);
const numGrapes = await getNumFruit('grape');
console.log(numGrapes);
const numPears = await getNumFruit('pear');
console.log(numPears);
console.log('End')
}
复制代码
在 for 循环中使用 await
首先定义一个存放水果的数组:
const fruitsToGet = [“apple”, “grape”, “pear”];
复制代码
循环遍历这个数组:
const forLoop = async _ => {
console.log('Start');
for (let index = 0; index < fruitsToGet.length; index++) {
// 得到每个水果的数量
}
console.log('End')
}
复制代码
在for
循环中,过上使用getNumFruit
来获取每个水果的数量,并将数量打印到控制台。
由于getNumFruit
返回一个promise
,我们使用 await
来等待结果的返回并打印它。
const forLoop = async _ => {
console.log('start');
for (let index = 0; index < fruitsToGet.length; index ++) {
const fruit = fruitsToGet[index];
const numFruit = await getNumFruit(fruit);
console.log(numFruit);
}
console.log('End')
}
复制代码
当使用await
时,希望JavaScript暂停执行,直到等