处理异步的利器 async-await

异步神器 async-await

async-await和Promise的关系

es5的回调地狱层层嵌套，es6的Promise链式调用，使我们稍喘口气，但发现层级很深时，一步步的then也很恶心，终于es7出现了async-await，给我们带来光明。

async-await只是为了让我们书写代码时更加流畅，当然也增强了代码的可读性，简单来说：async-await是建立在promise机制之上的，并不能取代其地位。

基本语法

下述代码就是async-await的基本形式，声明了关键字async、await，同时函数执行结果似乎返回了一个promise对象。没错！async声明的函数会返回一个promise对象。

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

console.log(basicDemo());
// Promise {<pending>}
// VM6753:17 0.25258173282299134

async

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

async function testAsync() {
    return 111;
}

testAsync().then(val => {
    console.log(val); // 111
});

// 若async定义的函数有返回值，相当于Promise.resolve(111)。
// 没有return则相当于执行了Promise.resolve();

await

await 必须出现在 async 函数内部，不能单独使用。

function error() {
  await Math.random();
}

notAsyncFunc(); 
// Uncaught SyntaxError: Unexpected identifier
// 会报错，必须在async内部使用

虽说await后面可以等任何的JS表达式，但是它最主要的意图是用来等待 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); // 等待的是promise对象
    console.log(result);// 两秒之后会被打印出来
}

awaitDemo();
// normalFunc
// something, ~~
// enough sleep~ 这句会在两秒后打印

项目案例

如果有三个ajax请求需要发生，第三个依赖第二个的结果，第二个依赖第一个的结果。

es5的callback回调会有三层，Promise会有三个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, 'req1');
    let result2 = await sleep(1000, 'req2' + result1);
    let result3 = await sleep(500, 'req3' + result2);
    console.log(`
        ${result3}
        ${result2}
        ${result1}
    `); 
}

test();
// 会在3.5s后输出
// req3req2req1
// req2req1
// req1

reject错误处理

通过try catch 去处理 Promise.reject 返回来的数据。

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

// 视情况而定，如果需要处理reject，就在代码块外面包一层try catch
async function errorDemo() {
    try {
        let result = await sleep(1000);
    } catch (err) {
        console.log(err); // throw error
    }
}

errorDemo();

处理并行请求

如果有三个异步请求需要发送，相互没有关联，只是需要当请求都结束后将界面的 loading 清除掉即可。

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

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

correctDemo(); // clear the loading~
// 所以说async-await基于Promise机制

await必须在async函数的上下文中的

await in for 循环

// 正常 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

参考链接，阮一峰老师的文章：www.ruanyifeng.com/blog/2015/0…

刚刚来到掘金，欢迎提出宝贵的建议，一起学习进步。