JS异步编程之async&await

前言

ES2017 标准中引入了 async 函数，async 函数其实是 generator 的语法糖，相较于其他异步方法进行了用法上的改进，让 JS 的异步编程变得更加简单和优雅。

一、async & await 用法

async function getData() {
    console.log(1);
    const response = await fetch("https://api.apiopen.top/getJoke?page=1&count=2&type=video", 
    {
        mode: 'cors', 
        headers: {
                'Content-Type': 'application/json'
        }
    });
    console.log(2);
    return response.json();
}

getData()
.then(res => {
    console.log(res);
    console.log(3);
})

console.log(4);  // 1 4   2 3
复制代码

async 函数总是会返回 Promise 对象，Promise.then() 回调方法的参数是 async 函数 return 的值。

async 函数在执行时会在 await 关键字语句挂起暂停执行，等待 await 右边的异步方法完成后再以 Promise.then() 的形式执行内部下面的语句，虽然会阻塞 await 下面的代码执行，但是并不会阻塞外部主线程方法的执行。

二、错误捕捉

async function getData() {
    // throw new Error("报错啦")
    try {
        throw new Error("报错啦")
        console.log(123456)
        return response;
    } catch (error) {
        console.log(error);
    }
}

getData()
.then((res) => {
    console.log(res);
})
.catch((err) => {
    console.log(err);
})
复制代码

如果 async 函数中有 try catch，那么 async 函数将直接捕捉并处理到内部的错误, 不会继续执行后面的代码。而如果 async 函数中没有 try catch，那么错误会导致返回的 Promise 直接转移到 rejected 状态，进而在返回的 Promise.catch() 方法中捕捉到。

三、async & await 应用

我们再一次封装 ajax 方法~

const Ajax = ({
    method = 'get',
    url = '/',
    data,
    async = true
}) => {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest()
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let res = JSON.parse(xhr.responseText)
                resolve(res)
            }
        }
        xhr.open(method, url, async)
        if (method === 'get') {
            xhr.send();
        }
        if (method === 'post') {
            let type = typeof data
            let header
            if (type === 'string') {
                header = 'application/x-www-form-urlencoded'
            }
            else {
                header = 'application/json'
                data = JSON.stringify(data)
            }
            xhr.setRequestHeader('Content-type', header)
            xhr.send(data);
        }
    })
    
}

Ajax.get = (url) => {
    return Ajax({url})
}


async function getData() {
    try {
        let data = await Ajax.get('https://api.apiopen.top/getJoke?page=1&count=2&type=video')
        return data;
    } catch (error) {
        console.log(error);
    }
    
}

getData()
.then(res => {
    console.log(res);
})
复制代码

总结

async&await 是结合 Promise 链式调用和 Generator 暂停执行的特点，且封装了 Generator 自执行函数，让代码看起来更像是同步执行，是未来异步编程的发展方向。