ES2017 Async

sPeng 發布于2019-08-26 10:23 / 786人閱讀

摘要：函數用于實現異步執行事件返回值一個對象，這個對象當函數開始執行時被創建。當函數返回值時，的方法會傳遞這個值。示例函數返回值假設函數返回的對象為如果一個意味著現在反映了這個的狀態。

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?{: 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));

GPU云服務器云服務器 async async 代碼 async await async屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106103.html

ES2017異步函數現已正式可用

摘要：標準已于年月份正式定稿了，并廣泛支持最新的特性異步函數。為了領會，我們需要回到普通回調函數中進一步學習。從此編寫回調函數不再那么痛苦。回調是一個函數，可以將結果傳遞給函數并在該函數內進行調用，以便作為事件的響應。 ES2017標準已于2017年6月份正式定稿了，并廣泛支持最新的特性：異步函數。如果你曾經被異步 JavaScript 的邏輯困擾，這么新函數正是為你設計的。異步函數或多或...

android_c 2019-08-21 12:04 評論0 收藏0
使用ES2017 async/await函數的注意點

摘要：正常函數異常函數注意當返回值本身就是一個對象時，函數的并不會對返回值進行二次包裝。總是按順序執行使用函數之前，我們還得搞清楚它的運行機制。因此在函數中的并不會掛起整個函數的執行。隨著node 7.6.0正式實裝async/await函數，js的異步編程變的比以往更加容易。但是，在我們全面投入async/await的懷抱之前，有必要對這個特性做一些細致的了解。書寫形式基本上，任何一...

libxd 2019-08-21 11:31 評論0 收藏0
細解JavaScript ES7 ES8 ES9 新特性

摘要：定期召開會議，會議由會員公司的代表與特邀專家出席。新版本將會包含每年截止時間之前完成的所有特性。它引入了一個新的構造函數和具有輔助函數的命名空間對象。導言：ECMAScript的演化不會停止，但是我們完全沒必要害怕。除了ES6這個史無前例的版本帶來了海量的信息和知識點以外，之后每年一發的版本都僅僅帶有少量的增量更新，一年更新的東西花半個小時就能搞懂了，完全沒必要畏懼。本文將帶您花大約...

Youngs 2019-08-23 13:45 評論0 收藏0
ES8 走馬觀花（ECMAScript2017 新特性）

摘要：距離上一篇走馬觀花已經快兩年時間了，上個月底正式發布，再寫一篇姊妹篇，介紹新特性。會議的每一項決議必須大部分人贊同，并且沒有人強烈反對才可以通過。已經準備就緒，該特性會出現在年度發布的規范之中。距離上一篇《ES6 走馬觀花》已經快兩年時間了，上個月底 ES8 正式發布，再寫一篇姊妹篇，介紹 ES8 新特性。什么是 ES8 ES8 是 ECMA-262 標準第 8 版的簡稱，從 ES...

meislzhua 2019-08-20 18:04 評論0 收藏0
ECMAScript 2017（ES8）特性概述

摘要：特性概述整理自，歸納于筆者的現代開發語法基礎與實踐技巧系列文章中也歡迎關注前端每周清單系列獲得一手資訊。本部分則介紹了新的構造器與包含靜態方法的命名空間對象。 ECMAScript 2017（ES8）特性概述整理自 ES8 was Released and here are its Main New Features，歸納于筆者的現代 JavaScript 開發：語法基礎與實踐技巧系...

Kyxy 2019-08-21 11:46 評論0 收藏0