ES7之Async/await的使用详解

我不是女神ヾ 2022-04-25 00:30 202阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

在 js 异步请求数据时，通常，我们多采用回调函数的方式解决，但是，如果有多个回调函数嵌套时，代码显得很不优雅，维护成本也相应较高。 ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖可以更好解决多层回调问题。

![Image 1][]

Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。  
await 操作符用于等待一个Promise 对象吗。。它只能在异步函数 async function 中使用。  
await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function。  
一个ajax请求时

通常 使用 ajax 请求数据时，会

$.ajax({
     url: 'data1.json',
     type: 'GET',
     success: function (res) {
      console.log(res) // 请求成功，则得到结果res
     },
     error: function(err) {
      console.log(err)
     }
    })//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力

上面可以得到我们想要的结果 res ---> \{ "url": "data2.json" \}

**多个ajax请求时**

但是 当得到的数据 res 需要用于另一个 ajax 请求时，则需要如下写法：

$.ajax({
     url: 'data1.json',
     type: 'GET',
     success: function (res) {
      $.ajax({
       url: res.url, // 将 第一个ajax请求成功得到的res 用于第二个ajax请求
       type: 'GET',
       success: function (res) {
        $.ajax({
         url: res.url, // 将第二个ajax请求成功得到的res 用于第三个ajax请求
         type: 'GET',
         success: function (res) {
          console.log(res) // {url: "this is data3.json"}
         },
         error: function(err) {
          console.log(err)
         }
        })
       },
       error: function(err) {
        console.log(err)
       }
      })
     },//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
     error: function(err) {
      console.log(err)
     }
    })

上面出现多个回调函数的嵌套，可读性较差（虽然这种嵌套在平常的开发中少见，但是在node服务端开发时，还是很常见的）

**优化方法**

**使用 promise 链式操作**

如下，使用 Promise，进行链式操作，可以使上面的异步代码看起来如同步般易读，从回调地狱中解脱出来。

**Async/await 方法**

*  async 表示这是一个async函数，即异步函数，await只能用在这个函数里面。
 *  await 表示在这里等待promise返回结果了，再继续执行。
 *  await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）
 *  await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。
 *  await 等待的虽然是promise对象，但不必写.then(..)，直接可以得到返回值。

执行一个ajax请求，可以通过如下方法：

执行多个ajax请求时：

async await捕捉错误:  
async await中.then(..)不用写了，那么.catch(..)也不用写，可以直接用标准的try catch语法捕捉错误。  
例如，如果下面的 url 写错了

作者：前端攻城小牛  
链接：https://www.jianshu.com/p/0e7be8191921

[Fundebug]: https://www.fundebug.com/
[Image 1]: