js循环中的async与await

脑中风科陈主任

已经无敌了。

入夏的杭州，出门热浪扑面而来，敲代码困意十足。马路上一条条大白腿，琳琅满目，参差不齐。没错，又到了减肥的好时候。（吹牛逼不能超过两句）

进入本文的正题

ES7 引入了 async 、 await 方法，来处理异步操作。关于这俩方法的使用，不再赘述，网上的文章多如牛毛，又写一篇入门，未免废话连篇。今天要分享的内容是在js的一些循环方法中， async 和 await 的表现是如何的。

for循环

在for循环中， async 和 await 表现的还是令人满意。现在假设一个场景，设置一个变量，爸妈我三个人的体重，求和

const family = {
  "dad": 150,
  "mom": 100,
  "son": 200
const familyToGet = ["dad", "mom", "son"]
// 写一个sleep方法
const sleep = ms => {
  return new Promise(resolve => setTimeout(resolve, ms))
// 假设获取体重数据的过程是一个请求接口的异步过程
const getFamilyWeight = person => {
  return sleep(2000).then(() => family[person])
const loop_for = async () => {
  console.log('start')
  let result = 0
  for(let i = 0; i < familyToGet.length; i++) {
    const person = familyToGet[i]
    const weight = await getFamilyWeight(person)
    result += weight
  console.log('result:', result)
  console.log('end')
loop_for()
// 运行结果
// start
// 150
// 100
// 200
// result: 450
// end

按照上述代码的打印结果分析，for循环内的代码，每一次都会等当前的 getFamilyWeight 方法返回了内容之后，才会继续下一个循环，循环全部结束的时候，才会跑for循环下面的代码，这是我们想要的结果，nice。

forEach循环

在 forEach 中， async 和 await 表现的差强人意，具体原因，还应归结于 forEach 中的回调函数，具体看看代码的表现

const family = {
  "dad": 150,
  "mom": 100,
  "son": 200
const familyToGet = ["dad", "mom", "son"]
// 写一个sleep方法
const sleep = ms => {
  return new Promise(resolve => setTimeout(resolve, ms))
// 假设获取体重数据的过程是一个请求接口的异步过程
const getFamilyWeight = person => {
  return sleep(2000).then(() => family[person])
const loop_forEach = () => {
  console.log('start')
  let result = 0
  // 在回调函数中，异步是不好控制的
  familyToGet.forEach(async person => {
    const num = await getFamilyWeight(person)
    console.log(num)
    result += num
  console.log('result', result)
  console.log('end')
loop_forEach()
// 运行结果
// start
// result 0
// end
// 150
// 100
// 200

从运行结果中，可以看出，代码没有等待 forEach 方法执行结束，而是直接继续往后执行了。回调函数传进去之后，2秒钟之后才会返回数据，这不是我们想要的结果，我现在是希望它能顺序的执行。

那么我们分析一下 forEach 内部大致的原理

Array.prototype.forEach = function(cb) {
  // this 为当前调用该函数的变量
  for(let i=0; i < this.length; i++) {
      cb(this[i], i);

且看上面的简易 forEach 重写，其实内部也是一个for循环，那么为什么不能表现的和for循环一样的运行结果呢？

我们的回调函数进入 forEach 之后，又被单独的以 cb() 这种形式执行了一次，相当于在内部又创建了一个 async await 形式的方法，当 forEach 函数执行完的时候，相当于创建了3个方法，这3个方法需要等待2秒钟，数据才会返回，而forEach外面的代码是不会等这3个函数返回内容再执行，而是一意孤行的管自己走了，所以才会造成这样的局面。返回问题的根本，我现在的需求是想要代码能顺序执行，且最后能算出一家人体重之和，下面我们来修改一下代码

const family = {
  "dad": 150,
  "mom": 100,
  "son": 200
const familyToGet = ["dad", "mom", "son"]
// 写一个sleep方法
const sleep = ms => {
  return new Promise(resolve => setTimeout(resolve, ms))
// 假设获取体重数据的过程是一个请求接口的异步过程
const getFamilyWeight = person => {
  return sleep(2000).then(() => family[person])
const loop_forEach = async () => {
  console.log('start')
  let promise = []
  // 在回调函数中，异步是不好控制的
  familyToGet.forEach(person => {
    const num = getFamilyWeight(person)
    promise.push(num)
  const result = await Promise.all(promise)
  console.log('result', result)
  const weight = result.reduce((sum, personWeight) => sum + personWeight)
  console.log('weight', weight)
  console.log('end')
loop_forEach()
// 运行结果
// start
// result [150, 100, 200]
// weight 450
// end

在 forEach 的回调函数内，直接把 getFamilyWeight 方法返回的 promise 对象push到 promise 这个数组变量内，通过 Promise.all 来做一层等待的异步处理。

map遍历

在 map 中，直接返回一个 promise 数组

const family = {
  "dad": 150,
  "mom": 100,
  "son": 200
const familyToGet = ["dad", "mom", "son"]
// 写一个sleep方法
const sleep = ms => {
  return new Promise(resolve => setTimeout(resolve, ms))
// 假设获取体重数据的过程是一个请求接口的异步过程
const getFamilyWeight = person => {
  return sleep(2000).then(() => family[person])
const loop_map = async () => {
  console.log('start')
  // map中返回的是一个promise数组，需要通过Promise.all处理
  const promise = familyToGet.map(async person => {
    const num = await getFamilyWeight(person)
    return num;
  console.log('promise', promise)
  // 等待promise里的内容全部返回，才会继续往下执行
  const result = await Promise.all(promise)
  console.log('result', result)
  const weight = result.reduce((sum, personWeight) => sum + personWeight)
  console.log('weight', weight)
  console.log('end')
loop_map()
// 运行结果
// start
// promise [Promise, Promise, Promise]
// result [150, 100, 200]
// weight 450
// end

大家应该能感觉到其实这个和上面改版后的 forEach 差不多，没错，正如你所料，只不过 map 方法能返回新的数组罢了， forEach 则不能返回数组。

在这里把 map 的简单实现写一下，方便理解

Array.prototype.map = function(cb) {
  // this 为当前调用该函数的变量
  var o = [];
  for(let i=0; i < this.length; i++) {