ES2017 Async

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

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

async 函數(shù)

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

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

示例1： async 函數(shù)返回值
    假設async 函數(shù)返回的Promise對象為p
    a) 如果return一個Promise, 意味著p現(xiàn)在反映了這個 Promise 的狀態(tài)。
        async function asyncFunc() {
            return Promise.resolve(123);
        }
        asyncFunc()
        .then(x => console.log(x)); // 123
     
    b) 如果return一個非Promise的值，則用這個值實現(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 操作符

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

    示例1：await在非async函數(shù)中使用，會出現(xiàn)語法錯誤
     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 是按順序執(zhí)行的, Promise.all() 是并行執(zhí)行的

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

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

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

a) 適用于func2的執(zhí)行必須在func1執(zhí)行完后才有效的場景
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
執(zhí)行流程圖如下：

示例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));

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/106103.html

ES2017異步函數(shù)現(xiàn)已正式可用

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

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

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

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

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

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

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

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

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

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