ES2017 Async

sPeng 發(fā)布于2019-08-26 10:23 / 780人閱讀

摘要：函數(shù)用于實(shí)現(xiàn)異步執(zhí)行事件返回值一個(gè)對(duì)象，這個(gè)對(duì)象當(dāng)函數(shù)開始執(zhí)行時(shí)被創(chuàng)建。當(dāng)函數(shù)返回值時(shí)，的方法會(huì)傳遞這個(gè)值。示例函數(shù)返回值假設(shè)函數(shù)返回的對(duì)象為如果一個(gè)意味著現(xiàn)在反映了這個(gè)的狀態(tài)。

async 函數(shù)

用于實(shí)現(xiàn)異步執(zhí)行事件

返回值：一個(gè)Promise對(duì)象，這個(gè)Promise對(duì)象當(dāng) async 函數(shù)開始執(zhí)行時(shí)被創(chuàng)建。
當(dāng) async 函數(shù)返回值時(shí)， Promise 的 resolve 方法會(huì)傳遞這個(gè)值。
當(dāng) async 函數(shù)拋出異常時(shí)，Promise 的 reject 方法會(huì)傳遞這個(gè)異常。

示例1： async 函數(shù)返回值
    假設(shè)async 函數(shù)返回的Promise對(duì)象為p
    a) 如果return一個(gè)Promise, 意味著p現(xiàn)在反映了這個(gè) Promise 的狀態(tài)。
        async function asyncFunc() {
            return Promise.resolve(123);
        }
        asyncFunc()
        .then(x => console.log(x)); // 123
     
    b) 如果return一個(gè)非Promise的值，則用這個(gè)值實(shí)現(xiàn)p
        async function asyncFunc() {
            return 123;
        }
        asyncFunc()
        .then(x => console.log(x)); // 123
    
示例2： async 函數(shù)拋出異常
    async function asyncFunc() {
        throw new Error("Problem!");
    }
    asyncFunc()
    .catch(err => console.log(err));  // Error: Problem!

await 操作符

用于等待一個(gè)Promise 對(duì)象。
    a) 它只能在 async function 中使用。
    b) await 只影響直接包含它的異步函數(shù)
返回值：返回 Promise 對(duì)象的處理結(jié)果。
    a) 如果等待的不是 Promise 對(duì)象，則返回該值本身。

    示例1：await在非async函數(shù)中使用，會(huì)出現(xiàn)語法錯(cuò)誤
     function asyncFunc() {
        let res = await 123;
        return res;
    }
    asyncFunc()
    // Uncaught SyntaxError: await is only valid in async function


    示例2：await 等待非promise
        async function asyncFunc() {
            let res = await 123;
            console.log(res); // 123
            return res;
        }
        asyncFunc()
            .then(x => console.log(x)); // 123

    示例3：await 等待promise對(duì)象
        async function asyncFunc() {
            let res = await Promise.resolve(123);
            console.log(res);// Promise?{: 123 ...}
            return res;
        }
        asyncFunc()
            .then(x => console.log(x)); // 123

await 是按順序執(zhí)行的, Promise.all() 是并行執(zhí)行的

a) 按順序等待兩個(gè)Promise
    async function fun() {
        const result1 = await func1();
        const result2 = await func2();
    }
    
    func1
    |-----------|
                func2
                |--------------------|
                                     fun執(zhí)行完

b) 等待一個(gè)Promise， 這個(gè)Promise是一個(gè)包含兩個(gè)元素的數(shù)組
    async function fun() {
        const [result1, result2] = await Promise.all([
            func1(),
            func2(),
        ]);
    }

    func1
    |-----------|
        func2
        |--------------------|
                              fun執(zhí)行完

a) 適用于func2的執(zhí)行必須在func1執(zhí)行完后才有效的場(chǎng)景
b) 使用于func2和func1互相不影響的場(chǎng)景

async使用

示例1：獲取http://example.com頁(yè)面

async function fetchData(url) {
    try {
        let response = await fetch(url);
        let text = await response.text();
        return text;
    } catch (error) {
        throw new Error(error);
    }
}
fetchData("https://cors-anywhere.herokuapp.com/http://example.com")
    .then(data => console.log(data))
    .catch(err => console.log(err));

fetchData 的返回值為promise p
執(zhí)行流程圖如下：

示例2：按順序請(qǐng)求多個(gè)url結(jié)果
    async function fetchData(urls) {
        try {
            let results = [];
            for (const url of urls) {
                const response = await fetch(url);
                let text = await response.text();
                results.push(text);
            }
            return results;
        } catch (error) {
            throw new Error(error);
        }
    }
    const urls = [
        "https://cors-anywhere.herokuapp.com/http://example.com",
        "https://cors-anywhere.herokuapp.com/http://www.w3school.com.cn/"
        
    ];
    fetchData(urls)
        .then(data => console.log(data))
        .catch(err => console.log(err));

示例3：并行請(qǐng)求多個(gè)url結(jié)果
    async function fetchData(urls) {
        try {
            let promises = urls.map(async (url) => {
                const response = await fetch(url);
                return response.text();
            });
            let results = await Promise.all(promises);
            return results;
        } catch (error) {
            throw new Error(error);
        }
    }
    
    const urls = [
        "https://cors-anywhere.herokuapp.com/http://www.w3school.com.cn/",
        "https://cors-anywhere.herokuapp.com/http://example.com"
    ];
    fetchData(urls)
        .then(data => console.log(data))
        .catch(err => console.log(err));