ES7 - async/await处理异步

当我还在使用promise来发送异步请求的时候，部门前端大佬已经改用async/ await了，代码很简洁，同时async/await 已经被标准化，是时候学习一下了~

一、async函数介绍

async 是 ES7 才有的与异步操作有关的关键字，和 Promise，Generator 有很大关联的。

【1】特点：

1、建立在 promise 之上。所以，不能把它和回调函数搭配使用。但它会声明一个异步函数，并隐式地返回一个Promise。因此可以直接return变量，无需使用 Promise.resolve 进行转换。

2、和 promise 一样，是非阻塞的。但不用写 then 及其回调函数，这减少代码行数，也避免了代码嵌套。而且，所有异步调用，可以写在同一个代码块中，无需定义多余的中间变量。

3、它的最大价值在于，可以使异步代码，在形式上，更接近于同步代码。

4、它总是与 await 一起使用的。并且await 只能在 async 函数体内。

5、await 是个运算符，用于组成表达式，它会阻塞后面的代码。如果等到的是 Promise 对象，则得到其 resolve 值。否则，会得到一个表达式的运算结果。

【2】用法：

先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 下面我们就来写一个async 函数

    async function test() {
      return 'Hello World';
    }
    console.log(test())

语法很简单，就是在函数前面加上async 关键字，来表示它是异步的，那怎么调用呢？async 函数也是函数，平时我们怎么使用函数就怎么使用它，直接加括号调用就可以了

查看控制台打印结果

原来async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then 方法， 继续修改代码

    async function test() {
      return 'Hello World';
    }
    test().then(res=>{
      console.log(res) // Hello World
    })
    console.log('我在后面，但是我先执行')

上面代码中通过then()方法获取到promise的返回值，假设promise内部抛出异常，我们同样可以通过catch()方法来捕获异常。

我们获取到了"Hello World', 同时test()异步函数的执行也没有阻塞后面代码的执行，"我在后面，但是我先执行"，这条语句会先执行

看到这，小伙伴们可能要纳闷了，就是封装一个Promise的对象返回而已，要这有个鬼用啊。别急，接下来有请async黄金搭档 await关键字闪亮登场。

二、await关键字

await是等待的意思，那么它等待什么呢，它后面跟着什么呢？

正常情况下，await 命令后面是一个 Promise 对象，它也可以跟其他值，如字符串，布尔值，数值以及普通函数。await表达式会使async函数暂停执行，等待promise的结果出来，然后恢复async的执行并返回解析值（resolved）

注意，await 关键字仅仅在async 函数中才有效，如果在async函数外使用await，则会抛出一个语法错误(SyntaxError)

    function testAwait() {
      return new Promise((resolve) => {
        setTimeout(function () {
          console.log("Test Await");
          resolve();
        }, 1000);
      });
    }

    async function test() {
      await testAwait();
      console.log("Hello World");
    }
    test();
    // Test Await
    // Hello World

我们来分析下上面这段代码

现在我们看看代码的执行过程，调用test函数，它里面遇到了await, await 表示等一下，代码就暂停到这里，不再向下执行了，它等什么呢？等后面的testAwait函数中的promise对象执行完毕，然后拿到promise resolve 的值并进行返回，返回值拿到之后，它继续向下执行。执行console.log语句。

注意：await 命令后面的 Promise 对象，运行结果不一定都是resolve，也可能是 rejected。当promise返回结果为rejected状态时，会终止后面的代码执行。所以最好把 await 命令放在 try...catch 代码块中。异常被try...catch捕获后，继续执行下面的代码，不会导致中断

      function testAwait() {
        return new Promise((resolve) => {
          setTimeout(function () {
            console.log("Test Await");
            resolve();
          }, 1000);
        });
      }

      async function test() {
        try {
          await testAwait();
        } catch (err) {
          console.log(err)
        }
        console.log("Hello World");
      }
      test();

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料