5 种在循环中使用 async/await 的方法，建议收藏__async await for循环

相关文章推荐

买醉的闹钟 · Help to filter in ...· 2 周前 ·

3vti1qhhvcgxwespkody · js ...· 2 周前 ·

英勇无比的铁链 · JavaScript同步、异步、回调 - ...· 2 周前 ·

深沉的领结 · [转]windows BLE编程 net ...· 1 周前 ·

飞奔的灯泡 · 数据库技术 | Oracle 中国· 2 月前 ·

焦虑的针织衫 · Python中用PyTorch机器学习神经网 ...· 1 年前 ·

干练的羽毛球 · 前端错误处理方案_iframe ...· 1 年前 ·

逆袭的圣诞树 · Numpy 数组操作 | 菜鸟教程· 1 年前 ·

纯真的羽毛球 · QT父子窗口事件传递与事件过滤器 - ...· 1 年前 ·

我们经常会遇到这样的需求， 在循环中使用异步请求 ，而 ES6 的 async/await 是我们让异步编程更简单的利剑 🗡。

本篇总结了 5 种在循环中使用 async/await 的方法（代码干货都能在浏览器控制台自测）：

打勾的方法 ✔：表示在循环中每个异步请求是按照次序来执行的，我们简称为 “串行”
打叉的方法 ❌ ：表示只借助循环执行所有异步请求，不保证次序，我们简称为 “并行”

按需所取，点赞👍收藏📕

5 种在循环中使用 async/await 的方法，建议收藏_回调函数

forEach ❌

首先，想到遍历，我们常用 forEach，用 forEach 可以吗？来试试~

首先要明确的是，本质上 forEach 就是一个 for 循环的包装。

Array.prototype.forEach = function (callback) {
  for (let index = 0; index < this.length; index++) {
    callback(this[index], index, this)
  }
}

在回调函数内部调用 await 需要这个回调函数本身也是 async 函数，所以在【循环+ async/await】中的代码应这样写：

async function someFunction(items) {
  items.forEach( async(i) => {
     const res = await someAPICall(i);
     console.log('--->', res);
  });
}

function someAPICall(param) {
    return new Promise((resolve, reject)=>{
      setTimeout(()=>{
        resolve("Resolved" + param)
      },param);
    })
}

someFunction(['3000','8000','1000','4000']);

在控制台执行，如图：

5 种在循环中使用 async/await 的方法，建议收藏_遍历数组_02

我们可以看到 forEach 并没有串行输出结果 。forEach 只是把所有请求执行了，谓之并行。

for...of... ✔

事实上 for...of 却符合我们串行的要求。

思路如下：

async function printFiles () {
  let fileNames = ['picard', 'kirk', 'geordy', 'ryker', 'worf'];
  for (const file of fileNames) {
    const contents = await fs.readFile(file, 'utf8');
    console.log(contents);
  }
}

针对本文例，代码如下：

async function someFunction(items) {
 for (const i of items){
     const res= await someAPICall(i)
     console.log('--->', res);
 }
}

function someAPICall(param) {
    return new Promise((resolve, reject)=>{
      setTimeout(()=>{
        resolve("Resolved" + param)
      },param);
    })
}

someFunction(['3000','8000','1000','4000']);

控制台执行如下图：

5 种在循环中使用 async/await 的方法，建议收藏_回调函数_03

reduce ✔

有了解过【循环】+【异步】的童鞋肯定知道 reduce。它可以称得上是精华所在！

代码如下：

function testPromise(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`Processing ${time}`);
      resolve(time);
    }, time);
  });
}

let result = [3000,2000,1000, 4000].reduce( (accumulatorPromise, nextID) => {
  return accumulatorPromise.then(() => {
    return testPromise(nextID);
  });
}, Promise.resolve());

result.then(e => {
  console.log("All Promises Resolved !!✨")
});

我们可以使用 reduce 函数来遍历数组并按顺序 resolve promise。

很清晰！自行控制台体验。

generator ✔

其实用 async generator 也是可以的。

async function* readFiles(files) {
  for(const file of files) {
    yield await readFile(file);
  }
};

针对本文例，代码如下：

async function* generateSequence(items) {
  for (const i of items) {
    await new Promise(resolve => setTimeout(resolve, i));
    yield i;
  }
}

(async () => {
  let generator = generateSequence(['3000','8000','1000','4000']);
  for await (let value of generator) {
    console.log(value);
  }
})();

自行控制台体验。

Promise.all ❌

如果你不用考虑异步请求的执行顺序，你可以选择 Promise.all()，即 Promise.all() 可以达到并行的目的。它也能保证你的请求都被执行过。

async function printFiles () {
  let fileNames = ['picard', 'kirk', 'geordy', 'ryker', 'worf'];
  await Promise.all(fileNames.map(async (file) => {
    const contents = await fs.readFile(file, 'utf8');
    console.log(contents);
  }));
}

针对本文例，代码如下：

async function promiseAll(arr) {
  await Promise.all(arr.map(async (i) => {
    await sleep(i)
    console.log('--->', i);
  }))
}

function sleep(i) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, i)
  })
}

promiseAll(['3000','8000','1000','4000'])

自行控制台体验。

好啦~

本次总结就到这！主要是代码部分，自己敲一敲，或者跑一跑、改一改，感受感受异同。