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书籍资料

你可能感兴趣的:(ES7 - async/await处理异步)