ES6-async await解决回调地狱

骑猪看日落 2023-06-22 08:24 32阅读 0赞

#### async await ####

通过 async await 语法可以优雅的以同步的流程表达异步操作；其本质是 Generator 的语法糖。

##### 语法： #####

async function fun() { 
    	await 异步操作
        await 异步操作
    }

特点：

*  遇到 await 进行等待，当前的异步操作完成后继续往下执行
 *  返回的是 Promise 对象，可以通过 then 方法进行下一步操作

##### async #####

**`async`** 用于声明一个 `function` 是异步的，不管 function 是普通函数还是异步函数，通过 async 修饰之后，返回的都是一个 `promise` 对象，异步函数中的 return 关键字代替了 resolve 方法

async 声明的一个函数中直接 `return` 一个直接量，async 会把这个直接量通过 `Promise.resolve()` 封装成 `Promise` 对象；

只有 `async` 函数内部的异步操作执行完，才会执行 `then` 方法指定的回调函数。

async function fun() { 
        // 返回 promise 对象
        return new Promise((resolve, reject) => { 
            resolve()
        })
    }
    // 打印
    console.log(fun())
    
    // 通过 async 处理后返回的都是 promise 对象
    async function func() { 
        // 返回 直接量
        return 'test'
    }
    // 打印
    console.log(func())

执行结果：  
![在这里插入图片描述][20191215132730534.png]

##### await #####

`await` 用于等待一个异步方法执行完成

`await` 只能出现在 async 函数中或者 `let test = await promise` （变量 promise 为一个 Promise 对象）这种在环境的顶层作用域中使用

`await` 放置在 Promise 调用之前，await 强制其他代码等待，直到 Promise 完成并返回结果

`await` 只能与 Promise 一起使用，不适用与回调一起使用

只要其中一个 Promise 对象变为 reject 状态，整个 async 函数都会中断操作

在 async 中使用 await

function say() { 
      return '1-返回直接量'
    }
    
    function say2() { 
      return Promise.resolve('2-Promise')
    }
    
    function say3() { 
      return '3-返回直接量'
    }
    
    // async 结合 await
    async function test() { 
      let aw = await say()
      let aw2 = await say2()
      let aw3 = await say3()
      // 打印
      console.log(aw)
      console.log(aw2)
      console.log(aw3)
    }
    // 调用
    test()

执行结果  
![在这里插入图片描述][20191215133804539.png]

async 与 await 执行多个异步操作：

function say() { 
      return new Promise((resolve, reject) => { 
        // 2s 后执行
        setTimeout(() => { 
          console.log('异步操作1')
          resolve()
        }, 2000)
      })
    }
    
    function say2() { 
      return new Promise((resolve, reject) => { 
        // 1s 后执行
        setTimeout(() => { 
          console.log('异步操作2')
          resolve()
        }, 1000)
      })
    }
    
    function say3() { 
      return new Promise((resolve, reject) => { 
        // 3s 后执行
        setTimeout(() => { 
          console.log('异步操作3')
          resolve()
        }, 3000)
      })
    }
    
    async function test() { 
      // 开始时间
      let start = new Date()
      console.log(start, +start)
    
      await say()
      await say2()
      await say3()
    
      // 结束时间
      let end = new Date()
      console.log(end, +end)
    
      // 耗时（秒）
      console.log('耗时:', (+end - +start) / 1000)
    }
    
    test()

执行结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

[20191215132730534.png]: https://img-blog.csdnimg.cn/20191215132730534.png
[20191215133804539.png]: https://img-blog.csdnimg.cn/20191215133804539.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191215183901162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70