async-await用法

1. await只能用在async函数的上下文中；

错误用法：

async function getObjKeys() {
    let arr = [1,2,3,4,5,6,7];

    arr.forEach(function(item) {
        await console.log(arr[i]);
    })
}

getObjKeys();

控制台有报错，报错内容是：

正确的用法：

async function getObjKeys() {
    let arr = [1,2,3,4,5,6,7];

    for(let i = 0; i < arr.length; i++) {
        await console.log(arr[i]);
    }
}

2. await 后面可以跟任何的JS 表达式。

如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决(等待promise对象的状态resolve),如果等的是正常的表达式则立即执行。

function sendRequest() {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
    
        xhr.open('get', '/api/blog/list', true);
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status == 200) {
                console.log('接口响应数据返回成功')
                resolve('成功了');
            }
        }
        xhr.send(null);
    })
}

async function getMsg() {
    let result = await sendRequest();
    console.log(result);
}

getMsg();

console打印结果：

3. async…await不能取代Promise.all

实现多个请求并发需要结合async-await和Promise.all()一起实现。
示例：当十个接口请求成功后，关闭loading。
如果给每个请求加await，则会导致ajax 的并发请求发成了阻塞式同步，上个接口请求完毕后，才会请求下一个接口。不合适的用法：

function sendRequest(url) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
    
        xhr.open('get', url, true);
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status == 200) {
                console.log('接口响应数据返回成功')
                resolve('成功了');
            }
        }
        xhr.send(null);
    })
}

async function getMsg() {
    let result1 = await sendRequest('/api/blog/list');
    let result2 = await sendRequest('/api/blog/detail');
    console.log('关闭loading');
}

getMsg();

正确的写法如下：

async function getMsg() {
   let result1 = sendRequest('/api/blog/list');
    let result2 = sendRequest('/api/blog/detail');
    let result = await Promise.all([result1, result2]);
    console.log('关闭loading');
}

4. async 函数是个Promise

详细博客参考：https://segmentfault.com/a/1190000011526612