欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

await?Streaking解決原理示例詳解

 更新時間：2022年12月14日 15:11:14   作者：桃小瑞  
這篇文章主要為大家介紹了await?Streaking解決原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

我們現(xiàn)在在請求接口的過程中，已經(jīng)習慣了async/await的寫法，已經(jīng)逐漸的代替了promise的寫法，但我們在開發(fā)的過程中，都是混用的狀態(tài)，當你體驗async/await過的好，就會愛不釋手。

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

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

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

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

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

優(yōu)化async/await

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

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

我們現(xiàn)在都會先基于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()

常見的封裝就長上面這樣，這樣除了方便傳參數(shù)，和沒封有啥區(qū)別？

我的答案是沒區(qū)別，那我們應該怎么來封裝呢？

看下面的代碼：

    // 封裝
    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()來判斷呀，數(shù)組第一個為成功，第二個為失敗，默認值都是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，實現(xiàn)一款自己的簡易Promise。

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

關于async/await

關于async/await我們會單獨拿一篇文章來說，感興趣的朋友可以關注我哦，因為當我發(fā)布后你可以更快的看到哦。

總結

以上就是我對async/await的一個簡單封裝，更多關于await Streaking原理的資料請關注腳本之家其它相關文章！

相關文章

最新評論