無論是在開發(fā)中還是在面試中 promise 都是一個非常重要的內(nèi)容。常見的面試中都會問及到 promise.then()、Promise.all 或者配合 async/await 使用的方式。M2h28資訊網(wǎng)——每日最新資訊28at.com

M2h28資訊網(wǎng)——每日最新資訊28at.com

但是，一旦我們遇到更高級別的崗位（比如大廠高P崗位），那么以上這些知識可能就不夠使用了。所以說，咱們今天就來分享 5個promise的“高級”使用技巧，提高對 promise 的理解，幫大家通過高P面試！M2h28資訊網(wǎng)——每日最新資訊28at.com

技巧 1：Promise 順序執(zhí)行

當面對必須順序執(zhí)行一系列任務(wù)的場景時，我們第一時間都會想到 “await”。但是除了 await 之外，使用 Promise 的替代方法可能更加優(yōu)雅。M2h28資訊網(wǎng)——每日最新資訊28at.com

const requestAry = [() => api.request1(), () => api.request2(), () => api.request3()];// 使用 `await`for (const requestItem of requestAry) { await requestItem();}// 使用promise進行串行執(zhí)行const finallyPromise = requestAry.reduce( (currentPromise, nextRequest) => currentPromise.then(() => nextRequest()), Promise.resolve() );

該方法使用“then”函數(shù)，可以簡潔高效地連接 Promise，確保任務(wù)的串行執(zhí)行。M2h28資訊網(wǎng)——每日最新資訊28at.com

技巧 2： Async/Await 的替代用法

使用 async/await 作為接收異步函數(shù)返回值的這種方式大家應(yīng)該都比較熟悉，但很少有人認識到異步函數(shù)從根本上來說是返回一個 promise。M2h28資訊網(wǎng)——每日最新資訊28at.com

我們來看下面這個場景M2h28資訊網(wǎng)——每日最新資訊28at.com

const fn1 = async () => 1;const fn2 = () => Promise.resolve(1);fn1(); // 返回值為1的promise對象

通常，await 與 Promise 對象一起使用，等待 promise 被解析。 因此，等待 fn1 函數(shù)也相當于以下內(nèi)容：M2h28資訊網(wǎng)——每日最新資訊28at.com

await fn1();-----const promiseInst = fn1();await promiseInst;

但是，對于 await 大家需要知道：當后面的值不是 Promise 對象時，它將會把該值包裝在 Promise 對象中。 因此，await之后的代碼必須異步執(zhí)行：M2h28資訊網(wǎng)——每日最新資訊28at.com

Promise.resolve().then(() => { console.log(1);});await 2;console.log(2);// 輸出: 1 2

這相當于：M2h28資訊網(wǎng)——每日最新資訊28at.com

Promise.resolve().then(() => { console.log(1);});Promise.resolve().then(() => { console.log(2);});

技巧 3：promise 處理連續(xù)的請求

當先前的請求仍處于 待處理狀態(tài) 時發(fā)送重復(fù)的請求可能會導(dǎo)致不必要的資源消耗。M2h28資訊網(wǎng)——每日最新資訊28at.com

request('GET', '/test-api').then(response1 => { // …});request('GET', '/test-api').then(response2 => { // …});

并且這種場景非常常見：M2h28資訊網(wǎng)——每日最新資訊28at.com

• 在頁面上渲染多個內(nèi)部組件同時獲取數(shù)據(jù)時。
• 處理提交按鈕未禁用，用戶連續(xù)點擊多次的場景。
• 預(yù)加載數(shù)據(jù)時，在預(yù)加載完成前導(dǎo)航至預(yù)加載頁面。

所以，我們可以對 promise 進行對應(yīng)的封裝處理，利用 緩存策略 解決這個問題，可以參考以下代碼：M2h28資訊網(wǎng)——每日最新資訊28at.com

// 緩存對象const pendingPromises = {};function request(type, url, data) {   const requestKey = JSON.stringify([type, url, data]);   // 讀取緩存   if (pendingPromises[requestKey]) {     return pendingPromises[requestKey];   }  const fetchPromise = fetch(url, {     method: type,     data: JSON.stringify(data)  })   .then(response => response.json())   .finally(() => {     delete pendingPromises[requestKey];   });   // 存入緩存  return pendingPromises[requestKey] = fetchPromise;}

技巧 4：解碼 then/catch/finally 返回值

我們知道 promise 擁有三種狀態(tài)的返回值：M2h28資訊網(wǎng)——每日最新資訊28at.com

.then 處理

// 返回新的 Promise(resolve => resolve(1))Promise.resolve().then(() => 1); // 返回新的 Promise(resolve => resolve(Promise.resolve(2)))Promise.resolve().then(() => Promise.resolve(2)); // 返回新的 Promise(resolve => resolve(Promise.reject(new Error('abc'))))Promise.resolve().then(() => { throw new Error('abc') }); // 返回新的 Promise(resolve => resolve(2))Promise.reject().then(() => 1, () => 2);

.catch 處理

// 返回新的 Promise(resolve => resolve(3))Promise.reject().catch(() => 3); // 返回新的 Promise(resolve => resolve(promise object calling catch))Promise.resolve().catch(() => 4);

.finally 處理

• 當finally函數(shù)返回非promise值時，它會在finally函數(shù)之前返回promise對象。

// 返回 Promise.resolve()Promise.resolve().finally(() => {}); // 返回 Promise.reject()Promise.reject().finally(() => {});

• 當finally函數(shù)的返回值是一個promise時，它會在finally函數(shù)之前等待promise解析，然后再返回promise對象。

// 返回處于 pending 狀態(tài)下的 Promise, 1秒后 resolve 為 5。Promise.resolve(5).finally(() => new Promise(res => { setTimeout(res, 1000);})); Promise.reject(6).finally(() => new Promise(res => { setTimeout(res, 1000);})); // 返回處于 pending 狀態(tài)下的 Promise, 在1秒后 reject 為 6。

技巧 5：區(qū)分“then”的第二個回調(diào)和“catch”回調(diào)

promise 有兩種處理錯誤的方式，分別是：M2h28資訊網(wǎng)——每日最新資訊28at.com

• .then 的第二個參數(shù)回調(diào)函數(shù)
• .catch 回調(diào)

當請求出現(xiàn)錯誤時，第二個回調(diào)函數(shù)和 Promise 的 .catch 都會被觸發(fā)。M2h28資訊網(wǎng)——每日最新資訊28at.com

乍一看，它們好像沒什么區(qū)別，但是——前者（第二個參數(shù)回調(diào)函數(shù)）無法捕獲“then”當前第一個回調(diào)函數(shù)中拋出的錯誤，而“catch”可以：M2h28資訊網(wǎng)——每日最新資訊28at.com

Promise.resolve().then( () => { throw new Error('成功的回調(diào)出現(xiàn)錯誤'); }, () => { // 這里不會執(zhí)行 }).catch(reason => { console.log(reason.message); // 成功的回調(diào)出現(xiàn)錯誤});

本文鏈接：http://www.www897cc.com/showinfo-26-82357-0.html你必須要知道的，五個Promise高級使用技巧

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 微軟新專利探索聲音 AI 應(yīng)用，可預(yù)估地震、風暴等自然災(zāi)害

下一篇： 聊聊2024最活躍的前端框架是哪個？Vue、React、Angular、Svelte、Ember？