ES6的Promise———async await

写这篇博客关于async-await的主要原因：在我自己构建的商城中用的后端技术koa2中用到async-await，主要是对async-await理解不深导致代码bug.

本质

​ async/await可以说是co模块和生成器函数的语法糖。用更加清晰的语义解决js异步代码。为了让我们用同步的方式去写异步的代码。

​ 熟悉co模块的同学应该都知道，co模块是TJ大神写的一个使用生成器函数来解决异步流程的模块，可以看做是生成器函数的执行器。而async/await则是对co模块的升级，内置生成器函数的执行器，不再依赖co模块。同时，async返回的是Promise。

async

用来声明该函数有异步操作，它会将函数的返回值通过Promise.resolve()包装成promise，所以async总会返回一个Promise对象。

await

理解为async wait，只能用在async函数里面。await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决(里面涉及到async-await的执行顺序的问题),如果等的是正常的表达式则立即执行。若 Promise 处理异常(rejected)，await 会把 Promise 的异常原因抛出。

作个比较

在ES6中的Promise将我们从ES5中的回调地狱中解救出来，但是当你处理相互依赖的异步任务，就会出现一连串的then链

1
2
3
4
5
6
7
8
9
10
11
12

function doSomething(second, param) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(param);
        }, second);
    })
}
doSomething(100, 'res1').then((res1)={
  doSomething(200,'res2'+res1)
}).then((res2)=>{
  doSomething(300,'res3'+res2)
})

async-await

1
2
3
4
5
6

async function doSomething(){
  let res1 = await doSomething1()
  let res2 = await doSomething2(res1)
  let res3 = await doSomething3(res2)
}

参考

async

await

理解 JavaScript 的 async/await

ES7 Async Await 聖經