一次性让你懂async/await，解决回调地狱

布满荆棘的人生 2021-09-18 08:46 280阅读 0赞

## 什么是async？ ##

[欢迎留言讨论][Link 1]

`async` 函数是 `Generator` 函数的语法糖。使用 关键字 `async` 来表示，在函数内部使用 `await` 来表示异步。相较于 `Generator`，`async` 函数的改进在于下面四点：

*  **内置执行器**。`Generator` 函数的执行必须依靠执行器，而 `async` 函数自带执行器，调用方式跟普通函数的调用一样
 *  **更好的语义**。`async` 和 `await` 相较于 `*` 和 `yield` 更加语义化
 *  **更广的适用性**。`co` 模块约定，`yield` 命令后面只能是 Thunk 函数或 Promise对象。而 `async` 函数的 `await` 命令后面则可以是 Promise 或者 原始类型的值（Number，string，boolean，但这时等同于同步操作）
 *  **返回值是 Promise**。`async` 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator 对象方便，可以直接使用 `then()` 方法进行调用

此处总结参考自：[理解async/await][async_await]

`async`是ES7新出的特性，表明当前函数是异步函数，不会阻塞线程导致后续代码停止运行。

### 怎么用 ###

申明之后就可以进行调用了

async function asyncFn() {
    　　return 'hello world';
    }
    asyncFn();复制代码

这样就表示这是异步函数，返回的结果

返回的是一个`promise`对象，状态为`resolved`，参数是`return`的值。那再看下面这个函数

async function asyncFn() {
        return '我后执行'
    }
    asyncFn().then(result => {
        console.log(result);
    })
    console.log('我先执行');复制代码

上面的执行结果是先打印出`'我先执行'`，虽然是上面`asyncFn()`先执行，但是已经被定义异步函数了，不会影响后续函数的执行。

现在理解了`async`基本的使用，那还有什么特性呢？

`async`定义的函数内部会默认返回一个`promise`对象，如果函数内部抛出异常或者是返回`reject`，都会使函数的`promise`状态为失败`reject`。

async function e() {    
        throw new Error('has Error');
    }
    e().then(success => console.log('成功', success))   
       .catch(error => console.log('失败', error));复制代码

我们看到函数内部抛出了一个`异常`，返回`reject`，`async`函数接收到之后，判定执行失败进入`catch`，该返回的错误打印了出来。

async function throwStatus() {    
        return '可以返回所有类型的值'
    }
    throwStatus().then(success => console.log('成功', success))             
                 .catch(error => console.log('失败', error));复制代码

//打印结果
    
    成功 可以返回所有类型的值
    复制代码

`async`函数接收到返回的值，发现不是`异常`或者`reject`，则判定成功，这里可以`return`各种数据类型的值，`false`,`NaN`,`undefined`...总之，都是`resolve`

但是返回如下结果会使`async`函数判定失败`reject`

1.  内部含有直接使用并且未声明的变量或者函数。  
    
2.  内部抛出一个错误`throw new Error`或者返回`reject`状态`return Promise.reject('执行失败')`  
    
3.  函数方法执行出错（?：Object使用push()）等等...

还有一点，在`async`里，必须要将结果`return`回来，不然的话不管是执行`reject`还是`resolved`的值都为`undefine`，建议使用箭头函数。

其余返回结果都是判定`resolved`成功执行。

//正确reject方法。必须将reject状态return出去。
    async function PromiseError() {    
       return Promise.reject('has Promise Error');
    }
    
    //这是错误的做法，并且判定resolve，返回值为undefined,并且Uncaught报错
    async function PromiseError() {
      Promise.reject('这是错误的做法');
    }
    
    PromiseError().then(success => console.log('成功', success))              
                  .catch(error => console.log('失败', error));复制代码

我们看到第二行多了个`Promise`对象打印，不用在意，这个是在`Chrome`控制台的默认行为，我们平常在控制台进行赋值也是同样的效果。如果最后`执行语句`或者`表达式`没有`return`返回值，默认`undefined`，做个小实验。

最后一行`Promise { <resolved> : undefined }` 是因为返回的是`console.log`执行语句，没有返回值。

d().then(success => console.log('成功',success)}
    等同于
    d().then(function(success){ 
                return console.log('成功',success);
            });
    
    复制代码

认识完了async，来讲讲await。

## await是什么？ ##

`await`意思是async wait(异步等待)。这个关键字只能在使用`async`定义的函数里面使用。任何`async`函数都会默认返回`promise`，并且这个`promise`解析的值都将会是这个函数的返回值，而`async`函数必须等到内部所有的 `await` 命令的 `Promise` 对象执行完，才会发生状态改变。

**打个比方，await是学生，async是校车，必须等人齐了再开车。**

就是说，必须等所有 `await` 函数执行完毕后，才会告诉 `promise`我成功了还是失败了，执行 `then`或者 `catch`

async function awaitReturn() {     
        return await 1
    };
    awaitReturn().then(success => console.log('成功', success))
                 .catch(error => console.log('失败',error))复制代码

在这个函数里，有一个`await`函数，async会等到`await 1`这一步执行完了才会返回`promise`状态，毫无疑问，判定`resolved`。

**很多人以为`await`会一直等待之后的表达式执行完之后才会继续执行后面的代码，****实际上`await`是一个让出线程的标志****。`await`后面的函数会先执行一遍，然后就会跳出整个`async`函数来执行后面js栈的代码。等本轮事件循环执行完了之后又会跳回到`async`函数中等待await****后面表达式的返回值，如果返回值为非`promise`则继续执行`async`函数后面的代码，否则将返回的`promise`放入`Promise`队列（Promise的Job Queue）**

来看个简单点的例子

这里本可以用箭头函数写方便点，但是为了便于阅读本质，还是换成了ES5写法，上面执行函数内所有的await函数才会返回状态，结果是执行完毕3秒后才会弹出'`完成`'。

**正常情况下，await 命令后面跟着的是 Promise ，如果不是的话，也会被转换成一个 立即 resolve 的 Promise。**

也可以这么写

这样用then链式回调的方式执行resolve

//打印结果
    
    START
    第一次延迟了500
    第二次延迟了700
    第三次延迟了900
    最后一次延迟1100
    END
    复制代码

用async/await呢？

async function start() {
        console.log('START');
        const time1 = 500;
        const time2 = await first(time1);
        const time3 = await second(time2);
        const res = await third(time3);
        console.log(`最后一次延迟${res}`);
        console.log('END');
    }
    start();复制代码

达到了相同的效果。但是这样遇到一个问题，如果`await`执行遇到报错呢

async function start() {
        console.log('START');
        const time1 = 500;
        const time2 = await first(time1);
        const time3 = await Promise.reject(time2);
        const res = await third(time3);
        console.log(`最后一次延迟${res}`);
        console.log('END');
    }
    start();复制代码

返回reject后，后面的代码都没有执行了，以此迁出一个例子:

let last;
    async function throwError() {  
        await Promise.reject('error');    
        last = await '没有执行'; 
    }
    throwError().then(success => console.log('成功', last))
                .catch(error => console.log('失败',last))复制代码

`其实`

`async`函数不难，难在错处理上。

上面函数，执行的到`await`排除一个错误后，就停止往下执行，导致`last`没有赋值报错。

`async`里如果有多个await函数的时候，如果其中任一一个抛出异常或者报错了，都会导致函数停止执行，直接 `reject`;

怎么处理呢，可以用`try/catch`，遇到函数的时候，可以将错误抛出，并且继续往下执行。

let last;
    async function throwError() {  
        try{  
           await Promise.reject('error');    
           last = await '没有执行'; 
        }catch(error){
            console.log('has Error stop');
        }
    }
    throwError().then(success => console.log('成功', last))
                .catch(error => console.log('失败',last))复制代码

这样的话，就可以继续往下执行了。

来个?练习下

执行结果

我们一步步来解析

首先`test()`打印出`test start...`

然后 `testFn1 = await testSomething();` 的时候，会先执行`testSometing()`这个函数打印出“`testSometing`”的字符串。

之后因为`await`会让出线程就会去执行后面的。`testAsync()`执行完毕返回`resolve`，触发`promiseFn`打印出“`promise START...`”。

接下来会把返回的Promise`resolve("promise RESOLVE")`放入Promise队列（Promise的Job Queue），继续执行打印“`===END===`”。

等本轮事件循环执行结束后，又会跳回到`async`函数中（`test()`函数），等待之前`await` 后面表达式的返回值，因为`testSometing()` 不是`async`函数，所以返回的是一个字符串“`return``testSometing`”。

`test()`函数继续执行，执行到`testFn2()`，再次跳出`test()`函数，打印出“`testAsync`”，此时事件循环就到了Promise的队列，执行`promiseFn.then((val)=> console.log(val));`打印出“`promise RESOLVE`”。

之后和前面一样 又跳回到test函数继续执行`console.log(testFn2)`的返回值，打印出“`hello async`”。

最后打印“`test end...`”。

加点料，让`testSomething()`变成`async`

async function testSometing() {
        console.log("testSomething");
        return "return testSomething";
    }
    
    async function testAsync() {
        console.log("testAsync");
        return Promise.resolve("hello async");
    }
    
    async function test() {
        console.log("test start...");
    
        const testFn1 = await testSometing();
        console.log(testFn1);
    
        const testFn2 = await testAsync();
        console.log(testFn2);
    
        console.log('test end...');
    }
    
    test();
    
    var promiseFn = new Promise((resolve)=> { 
                        console.log("promise START...");
                        resolve("promise RESOLVE");
                    });
    promiseFn.then((val)=> console.log(val));
    
    console.log("===END===")复制代码

执行结果

和上一个例子比较发现`promiseFn.then((val)=> console.log(val));`先于`console.log(testFn1);`执行，原因是因为现在`testSomething()`已经是`async`函数，返回的是一个`Promise`对象要要等它`resolve`，所以将当前Promise推入队列，所以会继续跳出`test()`函数执行后续代码。之后就开始执行Promise的任务队列了，所以先执行了`promise.then((val)=> console.log(val));`因为这个Promise对象先推入队列。

越来越多的人正在研究据说是异步终极编程解决方案的async/await，但是大部分人对这个方法内部怎么执行的还不是很了解，整理了await之后js的执行顺序，希望对你们有所帮助

1.  是一种编写异步代码的新方法。之前异步代码的方案是callback和promise。
2.  建立在 promise 的基础上，与promise一样也是非阻塞的。
3.  async/await 让异步代码看起来、表现起来更像同步代码。这正是其威力所在。

参考文献：[理解 JavaScript 的 async/await][JavaScript _ async_await]

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fwww.yuanziwen.cn%2F
[async_await]: https://link.juejin.im?target=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000010244279
[JavaScript _ async_await]: https://link.juejin.im?target=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000007535316