js异步编程终级解决方案 async/await

 

在最新的ES7（ES2017）中提出的前端异步特性：async、await。

async、await是什么

 

async顾名思义是“异步”的意思，async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成。而且await只能在async函数中使用

一般async、await都是跟随Promise一块儿使用的。为何这么说呢？由于async返回的都是一个Promise对象同时async适用于任何类型的函数上。这样await获得的就是一个Promise对象(若是不是Promise对象的话那async返回的是什么 就是什么)；

await获得Promise对象以后就等待Promise接下来的resolve或者reject。

async、await解决了什么问题

 

先来看下没有async/await以前js是如何处理异步操做的：

传统的回调地狱式写法：

Promise改进后的写法：

async/await改进后：

 

async、await写法

 

先来看下同步的写法

1 console.log(1); 2 
3 setTimeout(function () { 4   console.log(2); 5 }, 1000); 6 
7 console.log(3);

 下图是输出结果：

 

 

能够看到输出的顺序并非咱们代码中所写的那样，下面来看下async、await是如何解决这个问题的

 1 (async function () {  2 
 3   console.log(1);  4 
 5   await new Promise(function (resolve, reject) { 
 7     setTimeout(function () {  8       console.log(2);  9  resolve(); 10     }, 1000); 11  }); 12 
13   console.log(3); 14 
15 }())

 

能够看到这中写法的输出已经符合了咱们的预期，中间还多输出了一个Promise对象，这个原理能够用MDN上的官方定义来解释一下。

先来看下async是如何定义的

When an async function is called, it returns a Promise. When the async function returns a value,

the Promise will be resolved with the returned value. When the async function throws an exception

or some value, the Promise will be rejected with the thrown value.

这里说了三件事情

• async函数会返回一个Promise对象；
• 若是async函数中是return一个值，这个值就是Promise对象中resolve的值；
• 若是async函数中是throw一个值，这个值就是Promise对象中reject的值；

再来看下await的定义

An async function can contain an await expression, that pauses the execution of the async

function and watis for the passed Promise's resolution, and then resumes the async

function's execution and returns the resolved value.

这里是说await会暂停当前async函数的执行，等待后面的promise的计算结果后再继续当前的async函数。

 

看到这里就明白了，首先， await只能在async里面；而后， await后面要跟一个promise对象；

常规的promise对象会被js先暂存到 eventloop（事件队列）中，由于js是单线程执行的，等 执行栈空了以后，才会将事件队列中的事件取出放入执行栈中执行。

 

上述代码中先是将整段代码改形成了一个async（async能够用于任何函数）函数，而后又将setTimeOut改形成了一个Promise对象。

 

这里我作了一下实验，若是改造后的Promise对象不加resolve()会是什么状况：

 1 (async function () {  2 
 3   console.log(1);  4 
 5   await new Promise(resolve => {  6     setTimeout(() => {  7       console.log(2);  8     }, 1000);  9  }); 10   console.log(3); 11 }())

能够看到结果是这个样子，也就是说若是await后面等待的Promise对象如何不进行resolve() 的话，async函数就没法继续（至少我如今是这样理解的）。那若是await后面等的不是Promise对象呢，async还能继续走下去吗。

这里我写了个简单的代码测试了一下：

 1 function getSomething() {  2     console.log("something");  3 }  4 
 5 async function testAsync() {  6     console.log("hello async");  7 }  8 
 9 async function test() { 10  await getSomething(); 11  await testAsync(); 12 } 13 
14 test();

显而易见，若是await后面等是普通函数的话，那就会照常执行，和不加await是同样的。

---

总结一下，async/await就是为了解决异步回调而生的，它可让你的异步代码写的像同步的同样具备良好的可读性，以上就是本人对async/await的一些理解，不足之处请指正，谢谢。