promise與async和await的區別

時間 2019-11-08

原文原文鏈接

什麼是Async/Await?數組

　　async/await是寫異步代碼的新方式，之前的方法有回調函數和Promise。
　　async/await是基於Promise實現的，它不能用於普通的回調函數。
　　async/await與Promise同樣，是非阻塞的。
　　async/await使得異步代碼看起來像同步代碼，這正是它的魔力所在。promise

Async/Await語法異步

　假設函數getJSON返回值是 Promise，而且 Promise resolves 有一些JSON 對象。咱們只想調用它而且記錄該JSON而且返回完成。async

　　1）使用Promise：函數

    const makeRequest = () =>
        getJSON().then(data => {
            console.log(data)
            return "done"
        })

    makeRequest()

　　2）使用Async：oop

    const makeRequest = async () => {
        // await getJSON()表示console.log會等到getJSON的promise成功reosolve以後再執行。
        console.log(await getJSON)
        return "done"
    }

    makeRequest()

區別：this

　　1）函數前面多了一個aync關鍵字。await關鍵字只能用在aync定義的函數內。async函數會隱式地返回一個promise，該promise的reosolve值就是函數return的值。(示例中reosolve值就是字符串」done」)
　　2）第1點暗示咱們不能在最外層代碼中使用await，由於不在async函數內。例如：spa

    // 不能在最外層代碼中使用await
    await makeRequest()

    // 這是會出事情的 
    makeRequest().then((result) => {
        // 代碼
    })

爲何Async/Await更好？調試

　　1）使用async函數可讓代碼簡潔不少，不須要像Promise同樣須要些then，不須要寫匿名函數處理Promise的resolve值，也不須要定義多餘的data變量，還避免了嵌套代碼。日誌

　　2）錯誤處理：
　　　　Async/Await 讓 try/catch 能夠同時處理同步和異步錯誤。在下面的promise示例中，try/catch 不能處理 JSON.parse 的錯誤，由於它在Promise中。咱們須要使用 .catch，這樣錯誤處理代碼很是冗餘。而且，在咱們的實際生產代碼會更加複雜。

    const makeRequest = () => {
        try {
            getJSON().then(result => {
                // JSON.parse可能會出錯
                const data = JSON.parse(result)
                console.log(data)
            })
            // 取消註釋，處理異步代碼的錯誤
            // .catch((err) => {
            //   console.log(err)
            // })
        } catch (err) {
            console.log(err)
        }
    }

　　　使用aync/await的話，catch能處理JSON.parse錯誤:

    const makeRequest = async () => {
        try {
            // this parse may fail
            const data = JSON.parse(await getJSON())
            console.log(data)
        } catch (err) {
            console.log(err)
        }
    }

　　3）條件語句
　　　條件語句也和錯誤捕獲是同樣的，在 Async 中也能夠像平時通常使用條件語句

　　　 Promise：

    const makeRequest = () => {
        return getJSON().then(data => {
            if (data.needsAnotherRequest) {
                return makeAnotherRequest(data).then(moreData => {
                    console.log(moreData)
                    return moreData
                })
            } else {
                console.log(data)
                return data
            }
        })
    }

　　　　Async/Await：

    const makeRequest = async () => {
        const data = await getJSON()
        if (data.needsAnotherRequest) {
            const moreData = await makeAnotherRequest(data);
            console.log(moreData)
            return moreData
        } else {
            console.log(data)
            return data
        }
    }

　　4）中間值
　　　你極可能遇到過這樣的場景，調用promise1，使用promise1返回的結果去調用promise2，而後使用二者的結果去調用promise3。

    const makeRequest = () => {
        return promise1().then(value1 => {
            return promise2(value1).then(value2 => {
                return promise3(value1, value2)
            })
        })
    }

　　　若是 promise3 不須要 value1，嵌套將會變得簡單。若是你忍受不了嵌套，你能夠將value 1 & 2 放進Promise.all來避免深層嵌套，可是這種方法爲了可讀性犧牲了語義。除了避免嵌套，並無其餘理由將value1和value2放在一個數組中。

    const makeRequest = () => {
        return promise1().then(value1 => {
            return Promise.all([value1, promise2(value1)])
        }).then(([value1, value2]) => {
            return promise3(value1, value2)
        })
    }

　　　使用async/await的話，代碼會變得異常簡單和直觀。

    const makeRequest = async () => {
        const value1 = await promise1()
        const value2 = await promise2(value1)
        return promise3(value1, value2)
    }

　　5）錯誤棧
　　　若是 Promise 連續調用，對於錯誤的處理是很麻煩的。你沒法知道錯誤出在哪裏。

    const makeRequest = () => {
        return callAPromise()
            .then(() => callAPromise())
            .then(() => callAPromise())
            .then(() => callAPromise())
            .then(() => callAPromise())
            .then(() => {
                throw new Error("oops");
            })
    }

    makeRequest().catch(err => {
        console.log(err);
        // output
        // Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
    })

　　　 async/await中的錯誤棧會指向錯誤所在的函數。在開發環境中，這一點優點並不大。可是，當你分析生產環境的錯誤日誌時，它將很是有用。這時，知道錯誤發生在makeRequest比知道錯誤發生在then鏈中要好。

    const makeRequest = async () => {
        await callAPromise()
        await callAPromise()
        await callAPromise()
        await callAPromise()
        await callAPromise()
        throw new Error("oops");
    }

    makeRequest().catch(err => {
        console.log(err);
        // output
        // Error: oops at makeRequest (index.js:7:9)
    })