ES2017 Async

async 函數

用於實現異步執行事件

返回值：一個Promise對象，這個Promise對象當 async 函數開始執行時被建立。
當 async 函數返回值時， Promise 的 resolve 方法會傳遞這個值。
當 async 函數拋出異常時，Promise 的 reject 方法會傳遞這個異常。

示例1： async 函數返回值
    假設async 函數返回的Promise對象爲p
    a) 若是return一個Promise, 意味着p如今反映了這個 Promise 的狀態。
        async function asyncFunc() {
            return Promise.resolve(123);
        }
        asyncFunc()
        .then(x => console.log(x)); // 123
     
    b) 若是return一個非Promise的值，則用這個值實現p
        async function asyncFunc() {
            return 123;
        }
        asyncFunc()
        .then(x => console.log(x)); // 123
    
示例2： async 函數拋出異常
    async function asyncFunc() {
        throw new Error('Problem!');
    }
    asyncFunc()
    .catch(err => console.log(err));  // Error: Problem!

await 操做符

用於等待一個Promise 對象。
    a) 它只能在 async function 中使用。
    b) await 隻影響直接包含它的異步函數
返回值：返回 Promise 對象的處理結果。
    a) 若是等待的不是 Promise 對象，則返回該值自己。

    示例1：await在非async函數中使用，會出現語法錯誤
     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對象
        async function asyncFunc() {
            let res = await Promise.resolve(123);
            console.log(res);// Promise {<resolved>: 123 ...}
            return res;
        }
        asyncFunc()
            .then(x => console.log(x)); // 123

await 是按順序執行的, Promise.all() 是並行執行的

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

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

    func1
    |-----------|
        func2
        |--------------------|
                              fun執行完

a) 適用於func2的執行必須在func1執行完後纔有效的場景
b) 使用於func2和func1互相不影響的場景

async使用

示例1：獲取http://example.com頁面

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
執行流程圖以下：

示例2：按順序請求多個url結果
    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：並行請求多個url結果
    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));