ES6中Promise、async&await從入門到精通！

1、Promise 對象

①：Promise可以看作爲一個容器，容器內部裝着未來纔會結束的異步操作；

②：Promise用於三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）；

③：狀態一旦開始，只有兩種可能：從 pending 變爲 fulfilled 和從 pending 變爲 rejected，且只會有一個最終結果；

④：Promise對象是一個構造函數，用來生成Promise實例，接受一個攜帶兩種處理狀態的回調函數（resolve、resject）；

2、Promise 基礎使用

    var Promise_1 = new Promise((resolve, reject) => {
        //異步操作
        setTimeout(() => {
            let Data = true //判斷條件
            if (Data) {
                resolve('異步執行成功！') //操作成功
            } else {
                reject('異步執行失敗！') //操作失敗
            }
        }, 1000)
    })

    Promise_1.then(res => { //then接收成功狀態
        console.log(res)
    }).catch(error => { //catch捕獲異常
        console.error(error)
    })

 

使用字面量接收Promise返回值、new關鍵字創建Promise實例，實例接收一個回調函數，攜帶resolve、reject兩個方法；

實例生成之後可以使用.then（）/.catch（）方法接收Promise的狀態返回值；

上述代碼、Promise實例新建成功之後立即執行，判斷條件Data爲true，所以調用resolve方法，然後then方法指定的回調函

數，將在當前腳本所有同步任務執行完纔會執行，所以輸出結果爲 ‘異步執行成功！’。

3、Promise 鏈式調用

    var Promise_1 = new Promise((resolve, reject) => {
        //異步操作
        setTimeout(() => {
            let Data = true //判斷條件
            if (Data) {
                resolve('異步執行成功！') //操作成功
            } else {
                reject('異步執行失敗！') //操作失敗
            }
        }, 1000)
    })

    Promise_1.then(res => { //then接收成功狀態
        console.log(res)
        return res + '鏈式調用1'
    }).then(res => {
        console.log(res) //異步執行成功！鏈式調用1
    })

所謂鏈式調用，就是可以一直then下去，假設我們第一次拿到的數據需要再次異步處理之後纔可以繼續使用，那麼就需要鏈

式調用，很簡單 只需要在上一次then中返回當前數據即可。

4、Promise 同時執行

應用場景：假設需要同時獲取百度地圖、網易新聞、嗶哩嗶哩三個網站開放數據，此時我們就需要發送三個不同的異步請求

來獲取數據，怎麼辦呢？ Promise.all( )很好的解決了這個需求。

    var baidu = new Promise((resolve, reject) => {
        setTimeout(() => { resolve('百度數據')}, 1000)
    })
    var wnagyi = new Promise((resolve, reject) => {
        setTimeout(() => { resolve('網易數據')}, 2000)
    })
    var bili = new Promise((resolve, reject) => {
        setTimeout(() => { resolve('嗶哩嗶哩數據')}, 500)
    })
    Promise.all([baidu, wnagyi, bili]).then(res => {
        console.log(res) //["百度數據", "網易數據", "嗶哩嗶哩數據"]
    }).catch(err => {
        console.error(err) //捕獲異常
    })

 需要注意的是Promise.all（）實參是所有Promise實例的字面量組成的數組，執行完畢的結果是所有輸出結果的所組成的數

組；

 5、async / await 

首先了解async幹了什麼事情？我們先寫段簡單代碼，看看async的函數返回值究竟是什麼？

    async function testAsync() {
        return 'hello async'
    }

    console.log(testAsync()) //輸出 Promise對象

看到輸出就恍然大悟了——輸出的是一個 Promise 對象。

如果需要拿到 testAsync函數的返回值我們只需要使用Promise原型上的.then（）方法即可；因爲如果在函數中 return 一個直接量，

async 會把這個直接量通過 Promise.resolve() 封裝成 Promise 對象；

    async function testAsync() {
        return 'hello async'
    }

    testAsync().then(res => {
        console.log(res) //輸出 hello async
    })

一般來說，都認爲 await 是在等待一個帶有 async 的函數執行完畢。不過按語法說明，await 等待的是一個表達式，這個表達式的計算結果是 Promise 對象或者其它值。

因爲 async 函數返回一個 Promise 對象，所以 await 可以用於等待一個 async 函數的返回值——這也可以說是 await 在等 async 函數，但要清楚，它等的實際是一個返回值。要注意它可以等任意表達式的結果，所以，await 後面實際是可以接普通函數調用或者直接量的。所以下面這個示例完全可以正確運行：

    function testAsync() { //只有返回值、沒有返回Promise的函數
        return 'hello async'
    }

    function testPromise() { //返回Promise的函數
        return new Promise(resolve => {
            resolve('hello Promise')
        })
    }

    async function test() {
        var Async_1 = await testAsync()
        var Promise_1 = await testPromise().then()
        console.log(Async_1) //輸出 hello async
        console.log(Promise_1) //輸出 hello Promise
    }
    test() //執行

由上可知，只要await的函數有了返回值即走下一個await！

---

如果我的博客幫助你解決了開發問題，請不要吝嗇你的小紅心哦！❤

---

● 若有錯誤歡迎指出、及時修正 ●