ES6系列文章 异步神器async-await

视频讲解

关于异步处理，ES5的回调使咱们陷入地狱，ES6的Promise使咱们脱离魔障，终于、ES7的async-await带咱们走向光明。今天就来学习一下 async-await。

async-await和Promise的关系

常常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特色，接收了这些信息后，就蒙圈了。如今才知道，async-await是promise和generator的语法糖。只是为了让咱们书写代码时更加流畅，固然也加强了代码的可读性。简单来讲：async-await 是创建在 promise机制之上的，并不能取代其地位。

基本语法

async function basicDemo() {
    let result = await Math.random();
    console.log(result);
}

basicDemo();
// 0.6484863241051226
//Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

上述代码就是async-await的基本使用形式。有两个陌生的关键字async、await，同时函数执行结果彷佛返回了一个promise对象。

async

async用来表示函数是异步的，定义的函数会返回一个promise对象，可使用then方法添加回调函数。

async function demo01() {
    return 123;
}

demo01().then(val => {
    console.log(val);// 123
});
若 async 定义的函数有返回值，return 123;至关于Promise.resolve(123),没有声明式的 return则至关于执行了Promise.resolve();

await

await 能够理解为是 async wait 的简写。await 必须出如今 async 函数内部，不能单独使用。

function notAsyncFunc() {
    await Math.random();
}
notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier

await 后面能够跟任何的JS 表达式。虽说 await 能够等不少类型的东西，可是它最主要的意图是用来等待 Promise 对象的状态被 resolved。若是await的是 promise对象会形成异步函数中止执行而且等待 promise 的解决,若是等的是正常的表达式则当即执行。

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(' enough sleep~');
        }, second);
    })
}
function normalFunc() {
    console.log('normalFunc');
}
async function awaitDemo() {
    await normalFunc();
    console.log('something, ~~');
    let result = await sleep(2000);
    console.log(result);// 两秒以后会被打印出来
}
awaitDemo();
// normalFunc
// VM4036:13 something, ~~
// VM4036:15  enough sleep~

但愿经过上面的 demo，你们能够理解我上面的话。

实例

举例说明啊，你有三个请求须要发生，第三个请求是依赖于第二个请求的解构第二个请求依赖于第一个请求的结果。若用 ES5实现会有3层的回调，若用Promise 实现至少须要3个then。一个是代码横向发展，另外一个是纵向发展。今天指给出 async-await 的实现哈~

//咱们仍然使用 setTimeout 来模拟异步请求
function sleep(second, param) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(param);
        }, second);
    })
}

async function test() {
    let result1 = await sleep(2000, 'req01');
    let result2 = await sleep(1000, 'req02' + result1);
    let result3 = await sleep(500, 'req03' + result2);
    console.log(`
        ${result3}
        ${result2}
        ${result1}
    `);
}

test();
//req03req02req01
//req02req01
//req01

错误处理

上述的代码好像给的都是resolve的状况，那么reject的时候咱们该如何处理呢？

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('want to sleep~');
        }, second);
    })
}

async function errorDemo() {
    let result = await sleep(1000);
    console.log(result);
}
errorDemo();// VM706:11 Uncaught (in promise) want to sleep~

// 为了处理Promise.reject 的状况咱们应该将代码块用 try catch 包裹一下
async function errorDemoSuper() {
    try {
        let result = await sleep(1000);
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}

errorDemoSuper();// want to sleep~
// 有了 try catch 以后咱们就可以拿到 Promise.reject 回来的数据了。

当心你的并行处理!!!

我这里为啥加了三个感叹号呢~，由于对于初学者来讲一不当心就将 ajax 的并发请求发成了阻塞式同步的操做了，我就真真切切的在工做中写了这样的代码。await 若等待的是 promise 就会中止下来。业务是这样的，我有三个异步请求须要发送，相互没有关联，只是须要当请求都结束后将界面的 loading 清除掉便可。
刚学完 async await 开心啊，处处乱用~

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('request done! ' + Math.random());
        }, second);
    })
}

async function bugDemo() {
    await sleep(1000);
    await sleep(1000);
    await sleep(1000);
    console.log('clear the loading~');
}

bugDemo();

loading 确实是等待请求都结束完才清除的。可是你认真的观察下浏览器的 timeline 请求是一个结束后再发另外一个的（若观察效果请发真实的 ajax 请求）
那么，正常的处理是怎样的呢？

async function correctDemo() {
    let p1 = sleep(1000);
    let p2 = sleep(1000);
    let p3 = sleep(1000);
    await Promise.all([p1, p2, p3]);
    console.log('clear the loading~');
}
correctDemo();// clear the loading~

恩， 完美。看吧~ async-await并不能取代promise.

await in for 循环

最后一点了，await必须在async函数的上下文中的。

// 正常 for 循环
async function forDemo() {
    let arr = [1, 2, 3, 4, 5];
    for (let i = 0; i < arr.length; i ++) {
        await arr[i];
    }
}
forDemo();//正常输出
// 由于想要炫技把 for循环写成下面这样
async function forBugDemo() {
    let arr = [1, 2, 3, 4, 5];
    arr.forEach(item => {
        await item;
    });
}
forBugDemo();// Uncaught SyntaxError: Unexpected identifier

refs

不知道，个人意思有没有传递给你们。下面推荐几篇优秀的文章。
async 函数的含义和用法
ES7 Async Await 聖經
Understanding JavaScript’s async await

【开发环境推荐】 Cloud Studio 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，而且支持自定义域名指向，动态计算资源调整，能够完成各类应用的开发编译与部署。