亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

await?Streaking解決原理示例詳解

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

前言

我們現(xiàn)在在請(qǐng)求接口的過(guò)程中，已經(jīng)習(xí)慣了async/await的寫(xiě)法，已經(jīng)逐漸的代替了promise的寫(xiě)法，但我們?cè)陂_(kāi)發(fā)的過(guò)程中，都是混用的狀態(tài)，當(dāng)你體驗(yàn)async/await過(guò)的好，就會(huì)愛(ài)不釋手。

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

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

一旦失敗我們控制臺(tái)就會(huì)出現(xiàn)報(bào)錯(cuò)，一個(gè)接口就是一個(gè)紅色的。

此時(shí)，你想起我們還有try...catch...，可你知道嗎？try...catch...并不是萬(wàn)能的，有時(shí)候他捕獲不到異步的錯(cuò)誤，再有就是每個(gè)async/await你都加一個(gè)try...catch...，一個(gè)項(xiàng)目中，并可能只出現(xiàn)一個(gè)借口調(diào)用的地方吧，每個(gè)都加，就請(qǐng)問(wè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)過(guò)上面一說(shuō)，那我還不如用回promise。當(dāng)你看到一長(zhǎng)串的.then的時(shí)候你好維護(hù)嗎？不煩嗎？

那你說(shuō)我們應(yīng)該怎么辦？我們需要從源頭入手。

我們現(xiàn)在都會(huì)先基于axios/fetch進(jìn)行二次封裝對(duì)不？有時(shí)候我們還會(huì)三次封裝對(duì)吧？這個(gè)封裝就是我們的源頭。

我們先看個(gè)promise的封裝。

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

常見(jiàn)的封裝就長(zhǎng)上面這樣，這樣除了方便傳參數(shù)，和沒(méi)封有啥區(qū)別？

我的答案是沒(méi)區(qū)別，那我們應(yīng)該怎么來(lái)封裝呢？

看下面的代碼：

    // 封裝
    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
    }
    // 調(diào)用
    const foo = async () =>  {
        const [response, error] = await request({
            url: './demo.json'
        })
        console.log(response, error);
    }
    foo()

此時(shí)此刻，看到上面的封裝，有朋友就有疑問(wèn)了，那么怎么判斷呢？

我們可以通過(guò)if()來(lái)判斷呀，數(shù)組第一個(gè)為成功，第二個(gè)為失敗，默認(rèn)值都是null，我們只需要判斷不等于null就可以了呀。像下面這樣。

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

失敗的話判斷，同理。

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

但我更喜歡像下面這樣寫(xiě)。

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

demo.json

下面為demo.json的內(nèi)容。

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

關(guān)于Promise

關(guān)于Promise的詳細(xì)說(shuō)明及原理，以及手寫(xiě)一款Promise，感興趣的朋友可以看我的這篇文章Promise詳解-手寫(xiě)Promise，實(shí)現(xiàn)一款自己的簡(jiǎn)易Promise。

感興趣了解Promise的核心之一的鏈?zhǔn)秸{(diào)用的朋友可以看我這篇文章Promise 鏈?zhǔn)秸{(diào)用原理-精簡(jiǎn)20行代碼。

關(guān)于async/await

關(guān)于async/await我們會(huì)單獨(dú)拿一篇文章來(lái)說(shuō)，感興趣的朋友可以關(guān)注我哦，因?yàn)楫?dāng)我發(fā)布后你可以更快的看到哦。

總結(jié)

以上就是我對(duì)async/await的一個(gè)簡(jiǎn)單封裝，更多關(guān)于await Streaking原理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論