阅读 35

js循环语句中的async与await

前言

入冬了,回想起 2016 年的那个寒冬,我遭遇了裁员的风波。给我敲响了警钟,基础知识不能忘,时常要复习复习,才能应对一些突如其来的事情,今天篇文章也是因为之前被考到,记忆模糊回答的不是很确定,所以提笔再次记录一番。

正文

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++) {
      var temp = cb(this[i], i);
      o.push(temp);
  }
  return o;
}
复制代码

如上述代码,在外面通过 o 这个变量收集 cb() 回调函数的返回值,再到外面统一处理。真是妙啊,大家可以细细品味一番,能吾出很多新的对象。

总结

1、for循环内使用async和await还是可以的,稳如老狗🐶

2、不要在forEach方法内使用async、await,尽量避免这种写法,坑啊。。。

关注下面的标签,发现更多相似文章
评论