一文带你剖析async/await--【基于Promise的解决异步的最终方案】

前言

前几篇文章讲了关于promise的一些基本内容,接下来讲讲关于async和await的相关内容。 async/await 是ES7提出的基于Promise的解决异步的最终方案。

🎨剖析async与await

async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。

1️⃣async 函数

async函数是使用async关键字声明的函数。

1. 函数的返回值为promise对象

  async function main() {
  }
  
  let result = main()
  
  console.log(result)

promise对象的状态由async函数内部的返回值决定

• 如果返回值是一个非Promise类型的数据,那么结果就为成功的promise对象

  
    async function main() {
      return 521
    }
    let result = main()
    console.log(result)
  
  

• 如果返回值是一个Promise对象，那么Promise对象返回的结果就决定main函数返回结果

  
    async function main() {
      return new Promise((resolve, reject) => {
        resolve('ok')
      })
    }
    let result = main()
    console.log(result)
  
  

• 如果抛出异常，那么返回的结果是失败的promise对象，抛出的结果就是失败的promise对象的结果

  
    async function main() {
      throw 'oh no'
    }
    let result = main()
    console.log(result)
  
  

2. promise对象的结果由async函数执行的返回值决定

类似于then方法里的回调函数

2️⃣await 表达式

await 操作符用于等待一个Promise 对象。它只能在异步函数 async 中使用。

await 右侧的表达式一般为 promise 对象, 但也可以是其它的值（数字，字符串，布尔值等）

• 如果表达式是 promise 对象, await 返回的是 promise 成功的值。

  async function main() {
    let p = new Promise((resolve, reject) => {
      resolve('ok')
    })
    let res = await p
    console.log(res)
  }
  main()


打印结果为：ok

• 如果表达式是其它值, 直接将此值作为 await 的返回值。

  async function main() {
    let res2 = await 20
    console.log(res2)
  }
  main()

打印结果为：20

📛注意

1. await 必须写在 async 函数中, 但 async 函数中可以没有 await。
2. 如果 await 右侧的的 promise 是失败的, 就会抛出异常, 需要通过 try...catch 捕获处理。

  async function main() {
    let p = new Promise((resolve, reject) => {
      // resolve('ok')
      reject('error')
    })
    // 3.如果promise是失败的状态
    try {
      let res3 = await p
      } catch (e) {
        console.log(e)
      }
  }
  main()

🎭async与await结合实践

需求：

读取resource文件里的 1.html 2.html 3.html 文件内容，读取完后拼接输出

1.html文件内容：123

2.html文件内容：456

3.html文件内容：789

🌈使用回调函数的方式来实现：

const fs = require('fs')
fs.readFile('./resource/1.html', (err, data1) => {
  if (err) throw err
  fs.readFile('./resource/2.html', (err, data2) => {
    if (err) throw err
    fs.readFile('./resource/3.html', (err, data3) => {
      if (err) throw err
      console.log(data1 + data2 + data3)
    })
  })
})

可以看出使用这种方法比较繁琐。

🌈使用 async 与 await 实现：

const util = require('util')
const mineReadFile = util.promisify(fs.readFile)
async function main() {
  try {
    // 读取第一个文件的内容
    let data1 = await mineReadFile('./resource/1.html')
    let data2 = await mineReadFile('./resource/2.html')
    let data3 = await mineReadFile('./resource/3.html')
    console.log(data1 + data2 + data3)
  } catch (e) {
    console.log(e)
  }
}
main()

可以看出在使用async和await方法中看不到回调函数的，非常简洁，类似于写同步的函数调用，只需在前面加上await，内部的执行是异步的。

🎁async与await结合发送AJAX请求

首先接收AJAX请求的服务器：

const express = require('express')

const app = express()

app.all('/server-AJAX', (request, response) => {
  response.setHeader('Access-Control-Allow-Origin', '*')
  response.send('成功啦！')
})

app.listen(8000, () => {
  console.log('服务器已经监听到8000端口...')
})

使用async与await结合发送AJAX请求：

DOCTYPE html>

  
    
    
    
    async与await结合发送AJAX
  

  
    
    点击获取段子
    
      function sendAJAX(url) {
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest
          xhr.open('GET', url)
          xhr.send()
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status >= 200 && xhr.status