await Streaking解決原理示例詳解

Posted on by

前言

我們現在在請求接口的過程中，已經習慣瞭async/await的寫法，已經逐漸的代替瞭promise的寫法，但我們在開發的過程中，都是混用的狀態，當你體驗async/await過的好，就會愛不釋手。

async/await我們要拒絕 Streaking，啥叫 Streaking，我們看個代碼。

const foo = async () =>  {
    const response = await axios.get('https://www.baidu.com')
    console.log(response);
}
foo()

一旦失敗我們控制臺就會出現報錯，一個接口就是一個紅色的。

此時，你想起我們還有try...catch...，可你知道嗎？try...catch...並不是萬能的，有時候他捕獲不到異步的錯誤，再有就是每個async/await你都加一個try...catch...，一個項目中，並可能隻出現一個借口調用的地方吧，每個都加，就請問你累不累🥱。

const foo = async () =>  {
    try{
        const response = await axios.get('https://www.baidu.com')
        console.log(response);
    } catch (error) {
        console.log(error)
    }
}
foo()

優化async/await

經過上面一說，那我還不如用回promise。當你看到一長串的.then的時候你好維護嗎？不煩嗎？

那你說我們應該怎麼辦？我們需要從源頭入手。

我們現在都會先基於axios/fetch進行二次封裝對不？有時候我們還會三次封裝對吧？這個封裝就是我們的源頭。

我們先看個promise的封裝。

    // 封裝
    const request = (option = {}) =>{
        return new Promise((resolve, reject) => {
            axios.get(option.url).then( response => {
                resolve(response)
            }).catch( error => {
                reject(error)
            });
        })
    }
    // 調用
    const foo = async () =>  {
        const response = await request({
            url: './demo.json'
        })
        console.log(response);
    }
    foo()

常見的封裝就長上面這樣，這樣除瞭方便傳參數，和沒封有啥區別？

我的答案是沒區別，那我們應該怎麼來封裝呢？

看下面的代碼：

    // 封裝
    const request =  async (option = {})  => {
        const result = [null, null]
        await new Promise((resolve, reject) => {
            axios.get(option.url).then( response => {
                result[0] = response
                resolve(response)
            }).catch( error => {
                result[1] = error
                resolve(error)
            });
        })
        return result
    }
    // 調用
    const foo = async () =>  {
        const [response, error] = await request({
            url: './demo.json'
        })
        console.log(response, error);
    }
    foo()

此時此刻，看到上面的封裝，有朋友就有疑問瞭，那麼怎麼判斷呢？

我們可以通過if()來判斷呀，數組第一個為成功，第二個為失敗，默認值都是null，我們隻需要判斷不等於null就可以瞭呀。像下面這樣。

// 判斷請求成功
if(response !== null){
    console.log('請求成功內容：-----');
    console.log(response.data.data);
    return
}

失敗的話判斷，同理。

// 判斷請求失敗
if(error !== null){
    console.log('請求失敗內容：-----');
    console.log(error);
    return
}

但我更喜歡像下面這樣寫。

    // 調用
    const foo = async () =>  {
        const [response, error] = await request({
            url: './demo1.json'
        })
        // 判斷請求成功
        if(response !== null){
            console.log('請求成功內容：-----');
            console.log(response.data.data);
            return
        }
        // 判斷請求失敗
        console.log('請求失敗內容：-----');
        console.log(error);
        ...
    }

demo.json

下面為demo.json的內容。

{
    "code": 200,
    "data": {
        "name": "桃小瑞"
    }
}

關於Promise

關於Promise的詳細說明及原理，以及手寫一款Promise，感興趣的朋友可以看我的這篇文章Promise詳解-手寫Promise，實現一款自己的簡易Promise。

感興趣瞭解Promise的核心之一的鏈式調用的朋友可以看我這篇文章Promise 鏈式調用原理-精簡20行代碼。

關於async/await

關於async/await我們會單獨拿一篇文章來說，感興趣的朋友可以關註我哦，因為當我發佈後你可以更快的看到哦。

總結

以上就是我對async/await的一個簡單封裝，更多關於await Streaking原理的資料請關註WalkonNet其它相關文章！

推薦閱讀：