来源

https://mp.weixin.qq.com/s/RFK0QWeE-jXRUJUR0KDpSA

前言

大家好,我是林三心,以最通俗的话,讲最难的知识点是我写文章的宗旨

之前我发过一篇手写Promise原理,最通俗易懂的版本!!!,带大家基本了解了Promise内部的实现原理,而提到Promise,就不得不提一个东西,那就是async/await,async/await是一个很重要的语法糖,他的作用是用同步的方式,执行异步操作。那么今天我就带大家一起实现一下async/await吧!!!

async/await 用法

其实你要实现一个东西之前,最好是先搞清楚这两样东西

有什么用?

async/await的用处就是:用同步方式,执行异步操作,怎么说呢?举个例子

比如我现在有一个需求:先请求完接口1,再去请求接口2,我们通常会这么做

function request(num) { // 模拟接口请求
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(num * 2)
    }, 1000)
  })
}

request(1).then(res1 => {
  console.log(res1) // 1秒后 输出 2

  request(2).then(res2 => {
    console.log(res2) // 2秒后 输出 4
  })
})

或者我现在又有一个需求:先请求完接口1,再拿接口1返回的数据,去当做接口2的请求参数,那我们也可以这么做

request(5).then(res1 => {
  console.log(res1) // 1秒后 输出 10

  request(res1).then(res2 => {
    console.log(res2) // 2秒后 输出 20
  })
})

其实这么做是没问题的,但是如果嵌套的多了,不免有点不雅观,这个时候就可以用async/await来解决了

async function fn () {
  const res1 = await request(5)
  const res2 = await request(res1)
  console.log(res2) // 2秒后输出 20
}
fn()

是怎么用?

还是用刚刚的例子

需求一: