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

JavaScript前端超時異步操作完美解決過程

 更新時間:2021年11月25日 11:16:00   作者:廈門在乎科技  
這篇文章主要為大家介紹了JavaScript前端超時異步操作的完美解決方式,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步

自從 ECMAScript 的 Promise?ES2015?和 async/await?ES2017?特性發(fā)布以后,異步在前端界已經(jīng)成為特別常見的操作。異步代碼和同步代碼在處理問題順序上會存在一些差別,編寫異步代碼需要擁有跟編寫同步代碼不同的“意識”。

如果一段代碼久久不能執(zhí)行完成,會怎么樣?

如果這是同步代碼,我們會看到一種叫做“無響應(yīng)”的現(xiàn)象,或者通俗地說 —— “死掉了”;但是如果是一段異步代碼呢?可能我們等不到結(jié)果,但別的代碼仍在繼續(xù),就好像這件事情沒有發(fā)生一般。

當然事情并不是真的沒發(fā)生,只不過在不同的情況下會產(chǎn)生不同的現(xiàn)象。比如有加載動畫的頁面,看起來就是一直在加載;又比如應(yīng)該進行數(shù)據(jù)更新的頁面,看不到數(shù)據(jù)變化;

再比如一個對話框,怎么也關(guān)不掉 …… 這些現(xiàn)象我們統(tǒng)稱為 BUG。但也有一些時候,某個異步操作過程并沒有“回顯”,它就默默地死在那里,沒有人知道,待頁面刷新之后,就連一點遺跡都不會留下。

Axios 自帶超時處理

使用 Axios 進行 Web Api 調(diào)用就是一種常見的異步操作過程。通常我們的代碼會這樣寫:

try {
    const res = await axios.get(url, options);
    // TODO 正常進行后續(xù)業(yè)務(wù)
} catch(err) {
    // TODO 進行容錯處理,或者報錯
}

這段代碼一般情況下都執(zhí)行良好,直到有一天用戶抱怨說:怎么等了半天沒反應(yīng)?

然后開發(fā)者意識到,由于服務(wù)器壓力增大,這個請求已經(jīng)很難瞬時響應(yīng)了??紤]到用戶的感受,加了一個 loading 動畫:

try {
    showLoading();
    const res = await axios.get(url, options);
    // TODO 正常業(yè)務(wù)
} catch (err) {
    // TODO 容錯處理
} finally {
    hideLoading();
}

然而有一天,有用戶說:“我等了半個小時,居然一直在那轉(zhuǎn)圈圈!”于是開發(fā)者意識到,由于某種原因,請求被卡死了,這種情況下應(yīng)該重發(fā)請求,或者直接報告給用戶 —— 嗯,得加個超時檢查。

幸運的是 Axios 確實可以處理超時,只需要在?options?里添加一個?timeout: 3000?就能解決問題。如果超時,可以在?catch?塊中檢測并處理:

try {...}
catch (err) {
    if (err.isAxiosError && !err.response && err.request
        && err.message.startsWith("timeout")) {
        // 如果是 Axios 的 request 錯誤,并且消息是延時消息
        // TODO 處理超時
    }
}
finally {...}

Axios 沒問題了,如果用?fetch()?呢?

處理 fetch() 超時

fetch()?自己不具備處理超時的能力,需要我們判斷超時后通過?AbortController?來觸發(fā)“取消”請求操作。

如果需要中斷一個?fetch()?操作,只需從一個?AbortController?對象獲取?signal,并將這個信號對象作為?fetch()?的選項傳入。大概就是這樣:

const ac = new AbortController();
const { signal } = ac;
fetch(url, { signal }).then(res => {
    // TODO 處理業(yè)務(wù)
});
 
// 1 秒后取消 fetch 操作
setTimeout(() => ac.abort(), 1000);

ac.abort()?會向?signal?發(fā)送信號,觸發(fā)它的?abort?事件,并將其?.aborted?屬性置為?true。fetch()?內(nèi)部處理會利用這些信息中止掉請求。

上面這個示例演示了如何實現(xiàn)?fetch()?操作的超時處理。如果使用?await?的形式來處理,需要把?setTimeout(...)?放在?fetch(...)?之前:

const ac = new AbortController();
const { signal } = ac;
setTimeout(() => ac.abort(), 1000);
const res = await fetch(url, { signal }).catch(() => undefined); 

為了避免使用?try ... catch ...?來處理請求失敗,這里在?fetch()?后加了一個?.catch(...)?在忽略錯誤的情況。如果發(fā)生錯誤,res?會被賦值為?undefined。實際的業(yè)務(wù)處理可能需要更合理的?catch()?處理來讓?res?包含可識別的錯誤信息。

本來到這里就可以結(jié)束了,但是對每一個?fetch()?調(diào)用都寫這么長一段代碼,會顯得很繁瑣,不如封裝一下:

async function fetchWithTimeout(timeout, resoure, init = {}) {
    const ac = new AbortController();
    const signal = ac.signal;
    setTimeout(() => ac.abort(), timeout);
    return fetch(resoure, { ...init, signal });
}

沒問題了嗎?不,有問題。

如果我們在上述代碼的?setTimeout(...)?里輸出一條信息:

setTimeout(() => {
    console.log("It's timeout");
    ac.abort();
}, timeout);

并且在調(diào)用的給一個足夠的時間:

fetchWithTimeout(5000, url).then(res => console.log("success"));

我們會看到輸出?success,并在 5 秒后看到輸出?It's timeout。

對了,我們雖然為?fetch(...)?處理了超時,但是并沒有在?fetch(...)?成功的情況下干掉?timer。作為一個思維縝密的程序員,怎么能夠犯這樣的錯誤呢?干掉他!

async function fetchWithTimeout(timeout, resoure, init = {}) {
    const ac = new AbortController();
    const signal = ac.signal;    
    const timer = setTimeout(() => {
        console.log("It's timeout");
        return ac.abort();
    }, timeout);    
    try {
        return await fetch(resoure, { ...init, signal });
    } finally {
        clearTimeout(timer);
    }
}

完美!但問題還沒結(jié)束。

萬物皆可超時

Axios 和 fetch 都提供了中斷異步操作的途徑,但對于一個不具備?abort?能力的普通 Promise 來說,該怎么辦?

對于這樣的 Promise,我只能說,讓他去吧,隨便他去干到天荒地老 —— 反正我也沒辦法阻止。但生活總得繼續(xù),我不能一直等?。?/p>

這種情況下我們可以把?setTimeout()?封裝成一個 Promise,然后使用?Promise.race()?來實現(xiàn)“過時不候”:

race 是競速的意思,所以?Promise.race()?的行為是不是很好理解?

function waitWithTimeout(promise, timeout, timeoutMessage = "timeout") {
    let timer;
    const timeoutPromise = new Promise((_, reject) => {
        timer = setTimeout(() => reject(timeoutMessage), timeout);
    }); 
    return Promise.race([timeoutPromise, promise])
        .finally(() => clearTimeout(timer));    // 別忘了清 timer
}

可以寫一個 Timeout 來模擬看看效果:

(async () => {
    const business = new Promise(resolve => setTimeout(resolve, 1000 * 10));
    try {
        await waitWithTimeout(business, 1000);
        console.log("[Success]");
    } catch (err) {
        console.log("[Error]", err);    // [Error] timeout
    }
})();

以上就是JavaScript前端超時異步操作完美解決的詳細內(nèi)容,更多關(guān)于解決前端超時的異步操作的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論