async和await的使用小结

async和await是promise的语法糖。promise是ES6引入的，async/await是ES7引入的。

一、基本用法

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

async的用法：

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

async function demoFunc() {
    return 123;
}
demoFunc().then(val => {
    console.log(val);// 123
});

await的用法：

await用在async修饰的函数内部，其后可以跟任何js表达式。

• 如果其后跟的是正常的表达式，则立即执行；
• 如果其后跟的是promise对象会造成异步函数停止执行，并且等待promise的执行。

//sleep()函数已省略
function normalFunc() {
    console.log('normalFunc');
}
async function awaitDemo() {
    await normalFunc();
    console.log('something, ~~');
    let result = await sleep(2000);
    console.log(result);// 两秒之后会被打印出来
}
awaitDemo();

二、串行用法/并行用法

function sleep(second, param) = {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(param);
        }, second);
    })
}

/*******************************************************
 *
 * async和await的串行用法
 *
 ******************************************************/

async function testSerialRequest() {
    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}`);
}

testSerialRequest(); // req03req02req01, req02req01, req01

/*******************************************************
 *
 * async和await的并行用法
 *
 ******************************************************/


async function testParallelRequest() {
    let result1 = sleep(1000);
    let result2 = sleep(1000);
    let result3 = sleep(1000);

    await Promise.all([result1, result2, result3]);
    console.log(`Three request end!`);
}

testParallelRequest(); // Three request end!

------------------------------------------------------
1. 学会 new Promise()的用法;
2. 注意 async 和 await 的书写格式;
3. 捕获错误的写法
-----------------------------------------------------

三、错误处理

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

async function errorDemo() {
    try {
        let result = await sleep(1000);
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}

四、async/await在箭头函数中

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

解析：await的上下文，是一个箭头函数，而非async声明的函数。
解决办法： 用async修饰箭头函数

//用async修饰箭头函数即可
let sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(console.log('stevekeol'));
        }, time);
    })
};
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var start = function(){
    arr.forEach(async ()=>{
        await sleep(2000)
    })
}
start();