Promise 面試實戰指北
你好，我是 TianTian。
卷友們，週末好呀！大家週末要怎麼捲過去呢。
想着馬上要秋招了，大家肯定在加急準備秋招，今天給大家分享一篇不錯的Promise面試知識點梳理。說不定對你有一些幫助。
編者註解
這是作者鼠子的寄語：
本文旨在使用一個易於理解、易於記憶的方式去喫透 promise 相關應用側的技術點，從而應用於簡歷和麪試中。
比起其他大佬的文章，本文更注重於實戰性，同時也會盡可能的去提高代碼規範和質量（個人水平受限無法給出最優解）。俗話說的好，貪多嚼不爛，想要深入瞭解更多實現方法和細節的同學可以補充看更多更加優秀的文章。
超時控制
背景
-
衆所周知，fetch 請求是無法設置超時時間的，因此我們需要自己去模擬一個超時控制。
-
轉盤問題，一個抽獎轉盤動畫效果有 5 秒，但是一般來說向後端請求轉盤結果只需要不到一秒，因此請求結果至少得等 5 秒才能展現給用戶。
問題分析
首先，超時控制比較簡單，和 Promise.race() 的思想是類似，或者可以直接使用這個函數去解決。
然後，轉盤問題如果要答好，需要考慮兩種情況。
-
轉盤動畫還未完成，請求結果已經拿到了，此時要等到動畫完成再展示結果給用戶。
-
轉盤動畫完成了，請求結果還未拿到，此時需要等待結果返回（可以設置請求超時時間）。
所以，轉盤問題更適合用 Promise.all() 來解決。
實戰版源碼
代碼分爲多個版本，從上自下，記憶難度遞增但面試成績更優，請按需選擇。
一、基於Promise.race()的超時控制。
/**
* 超時控制版本一
*/
/**
* 輔助函數，封裝一個延時promise
* @param {number} delay 延遲時間
* @returns {Promise<any>}
*/
function sleep(delay) {
return new Promise((resolve, reject) => {
setTimeout(() => reject(new Error("timeout")), delay);
});
}
/**
* 將原promise包裝成一個帶超時控制的promise
* @param {()=>Promise<any>} requestFn 請求函數
* @param {number} timeout 最大超時時間
* @returns {Promise<any>}
*/
function timeoutPromise(requestFn, timeout) {
return Promise.race([requestFn(), sleep(timeout)]);
}
// ----------下面是測試用例------------
// 模擬一個異步請求函數
function createRequest(delay) {
return () =>
new Promise((resolve) => {
setTimeout(() => {
resolve("done");
}, delay);
});
}
// 超時的例子
timeoutPromise(createRequest(2000), 1000).catch((error) =>
console.error(error)
);
// 不超時的例子
timeoutPromise(createRequest(2000), 3000).then((res) => console.log(res));
複製代碼二、將promise.race()幹掉。
/**
* 超時控制版本二
*/
/**
* 輔助函數，封裝一個延時promise
* @param {number} delay 延遲時間
* @returns {Promise<any>}
*/
function sleep(delay) {
return new Promise((resolve, reject) => {
setTimeout(() => reject(new Error("timeout")), delay);
});
}
/**
* 將原promise包裝成一個帶超時控制的promise
* @param {()=>Promise<any>} requestFn 請求函數
* @param {number} timeout 最大超時時間
* @returns {Promise<any>}
*/
function timeoutPromise(requestFn, timeout) {
const promises = [requestFn(), sleep(timeout)];
return new Promise((resolve, reject) => {
for (const p of promises) {
p.then((res) => resolve(res)).catch((error) => reject(error));
}
});
}
// ----------下面是測試用例------------
// 模擬一個異步請求函數
function createRequest(delay) {
return () =>
new Promise((resolve) => {
setTimeout(() => {
resolve("done");
}, delay);
});
}
// 超時的例子
timeoutPromise(createRequest(2000), 1000).catch((error) =>
console.error(error)
);
// 不超時的例子
timeoutPromise(createRequest(2000), 3000).then((res) => console.log(res));
複製代碼三、基於Promise.all()的轉盤問題（不考慮請求超時），和上面略有不同的是sleep函數超時後Promise從pending態轉到fulfilled態而不是rejected態。
/**
* 轉盤問題不考慮超時
*/
/**
* 輔助函數，封裝一個延時promise
* @param {number} delay 延遲時間
* @returns {Promise<any>}
*/
function sleep(delay) {
return new Promise((resolve) => {
setTimeout(() => resolve(delay), delay);
});
}
/**
* 將原promise包裝成一個轉盤promise
* @param {()=>Promise<any>} requestFn 請求函數
* @param {number} animationDuration 動畫持續時間
* @returns {Promise<any>}
*/
function turntablePromise(requestFn, animationDuration) {
return Promise.all([requestFn(), sleep(animationDuration)]);
}
// ----------下面是測試用例------------
// 模擬一個異步請求函數
function createRequest(delay) {
return () =>
new Promise((resolve) => {
setTimeout(() => {
resolve("done");
}, delay);
});
}
// 請求比轉盤動畫快
turntablePromise(createRequest(2000), 5000).then((res) => console.log(res));
// 請求比轉盤動畫慢
turntablePromise(createRequest(2000), 1000).then((res) => console.error(res));
複製代碼四：基於Promise.all()的轉盤問題（考慮請求超時），無非就是拼刀刀沒什麼亮點。
/**
* 轉盤問題考慮超時
*/
/**
* 將原promise包裝成一個帶超時控制的promise
* @param {Promise<any>} request 你的請求
* @param {number} timeout 最大超時時間
* @returns {Promise<any>}
*/
function timeoutPromise(request, timeout) {
function sleep(delay) {
return new Promise((resolve, reject) => {
setTimeout(() => reject(new Error("timeout")), delay);
});
}
const promises = [request, sleep(timeout)];
return new Promise((resolve, reject) => {
for (const p of promises) {
p.then((res) => resolve(res)).catch((error) => reject(error));
}
});
}
/**
* 將原promise包裝成一個轉盤promise
* @param {()=>Promise<any>} requestFn 請求函數
* @param {number} timeout 超時時間
* @param {number} animationDuration 動畫持續時間
* @returns {Promise<any>}
*/
function turntablePromise(requestFn, timeout, animationDuration) {
function sleep(delay) {
return new Promise((resolve) => {
setTimeout(() => resolve(delay), delay);
});
}
return Promise.all([timeoutPromise(requestFn(), timeout), sleep(animationDuration)]);
}
// ----------下面是測試用例------------
// 模擬一個異步請求函數
function createRequest(delay) {
return () =>
new Promise((resolve) => {
setTimeout(() => {
resolve("done");
}, delay);
});
}
// 請求比轉盤動畫慢且超時
turntablePromise(createRequest(2000), 1500, 1000).catch((error) =>
console.error(error)
);
複製代碼五：幹掉Promise.all()，這版代碼沒有加什麼核心的東西，無非就是手寫一下這個 api，所以留給大家自測。
取消重複請求
背景
當用戶頻繁點擊一個搜索 Button 時，會在短時間內發出大量的搜索請求，給服務器造成一定的壓力，同時也會因請求響應的先後次序不同而導致渲染的數據與預期不符。這裏，我們可以使用防抖來減小服務器壓力，但是卻沒法很好地解決後面的問題。
問題分析
這個問題的本質在於，同一類請求是有序發出的（根據按鈕點擊的次序），但是響應順序卻是無法預測的，我們通常只希望渲染最後一次發出請求響應的數據，而其他數據則丟棄。因此，我們需要丟棄（或不處理）除最後一次請求外的其他請求的響應數據。
實戰版源碼
其實 axios 已經有了很好的實踐，大家可以配合阿寶哥的文章來食用。此處取消promise的實現藉助了上一章節的技巧，而在axios中因爲所有異步都是由 xhr 發出的，所以axios的實現中還藉助了 xhr.abort() 來取消一個請求。
/**
* 取消請求
*/
function CancelablePromise() {
this.pendingPromise = null;
}
// 包裝一個請求並取消重複請求
CancelablePromise.prototype.request = function (requestFn) {
if (this.pendingPromise) {
this.cancel("取消重複請求");
}
const _promise = new Promise((resolve, reject) => (this.reject = reject));
this.pendingPromise = Promise.race([requestFn(), _promise]);
return this.pendingPromise;
};
// 取消當前請求
CancelablePromise.prototype.cancel = function (reason) {
this.reject(new Error(reason));
this.pendingPromise = null;
};
// ----------下面是測試用例------------
// 模擬一個異步請求函數
function createRequest(delay) {
return () =>
new Promise((resolve) => {
setTimeout(() => {
resolve("done");
}, delay);
});
}
const cancelPromise = new CancelablePromise();
// 前四個請求將被自動取消
for (let i = 0; i < 5; i++) {
cancelPromise
.request(createRequest(1000))
.then((res) => console.log(res)) // 最後一個 done
.catch((err) => console.error(err)); // 前四個 error: 取消重複請求
}
// 設置一個定時器等3s，讓前面的請求都處理完再繼續測試
setTimeout(() => {
// 手動取消最後一個請求
cancelPromise
.request(createRequest(1000))
.then((res) => console.log(res))
.catch((err) => console.error(err)); // error:手動取消
cancelPromise.cancel("手動取消");
}, 3000);
// 設置一個定時器等4s，讓前面的請求都處理完再繼續測試
setTimeout(() => {
cancelPromise
.request(createRequest(1000))
.then((res) => console.log(res)) // done
.catch((err) => console.error(err));
}, 4000);
複製代碼限制併發請求數
背景
一般來說，我們不會刻意去控制請求的併發。只有在一些場景下可能會用到，比如，收集用戶的批量操作（每個操作對應一次請求），待用戶操作完成後一次性發出。另外，爲了減小服務器的壓力，我們還會限制併發數。
問題分析
看上去，Promise.allSettled 很適合應對這樣的場景，但是稍微想一下就能發現，它能控制的粒度還是太粗了。首先，它必須等待所有Promise都resolve或reject，其次，如果有併發限制的話用它來做還需要分批請求，實際效率也會比較低，短木板效應很明顯。
實戰版源碼
/**
* 限制併發請求數
*/
/**
* 併發請求限制併發數
* @param {()=>Promise<any> []} requestFns 併發請求函數數組
* @param {numer} limit 限制最大併發數
*/
function concurrentRequest(requestFns, limit) {
// 遞歸函數
function recursion(requestFn) {
requestFn().finally(() => {
if (_requestFns.length > 0) {
recursion(_requestFns.pop());
}
});
}
const _requestFns = [...requestFns];
// 限制最大併發量
for (let i = 0; i < limit && _requestFns.length > 0; i++) {
recursion(_requestFns.pop());
}
}
// ----------下面是測試用例------------
// 模擬一個異步請求函數
function createRequest(delay) {
return () =>
new Promise((resolve) => {
setTimeout(() => {
resolve("done");
}, delay);
}).then((res) => {
console.log(res);
});
}
const requestFns = [];
for (let i = 0; i < 10; i++) {
requestFns.push(createRequest(1000));
}
concurrentRequest(requestFns, 3);
複製代碼管理全局 loading 態
背景
當我們一個頁面或組件涉及到多個請求時，可能會對應多個 loading 態的管理。在某些場景下，我們只希望用一個 loading 態去管理所有異步請求，當任一存在 pending 態的請求時，展示全局 loading 組件，當所有請求都 fulfilled 或 rejected 時，隱藏全局 loading 組件。
問題分析
這個問題的關鍵就是在於我們需要管理所有 pending 態的請求，並適時更新 loading 態。
實戰版源碼
/**
* 管理全局loading態
*/
function PromiseManager() {
this.pendingPromise = new Set();
this.loading = false;
}
// 給每個pending態的promise生成一個身份標誌
PromiseManager.prototype.generateKey = function () {
return `${new Date().getTime()}-${parseInt(Math.random() * 1000)}`;
};
PromiseManager.prototype.push = function (...requestFns) {
for (const requestFn of requestFns) {
const key = this.generateKey();
this.pendingPromise.add(key);
requestFn().finally(() => {
this.pendingPromise.delete(key);
this.loading = this.pendingPromise.size !== 0;
});
}
};
// ----------下面是測試用例------------
// 模擬一個異步請求函數
function createRequest(delay) {
return () =>
new Promise((resolve) => {
setTimeout(() => {
resolve("done");
}, delay);
}).then((res) => console.log(res));
}
const manager = new PromiseManager();
// 增加多個請求
manager.push(createRequest(1000), createRequest(2000), createRequest(3000));
manager.push(createRequest(1500));
// 每秒輪詢loading態，直到loading爲false
const id = setInterval(() => {
console.log(manager.loading);
if (!manager.loading) clearInterval(id);
}, 1000);
// 增加多個請求
manager.push(createRequest(2500));
複製代碼加餐
串行化的三種實現方式
使用串行化的常見場景，請求之間有依賴關係或時序關係，如紅綠燈。
/**
* 串行化的三種實現
**/
// 法一，遞歸法
function runPromiseInSeq1(requestFns) {
function recursion(requestFns) {
if (requestFns.length === 0) return;
requestFns
.shift()()
.finally(() => recursion(requestFns));
}
const _requestFns = [...requestFns];
recursion(_requestFns);
}
// 法二：迭代法
async function runPromiseInSeq2(requestFns) {
for (const requestFn of requestFns) {
await requestFn();
}
}
// 法三：reduce
function runPromiseInSeq3(requestFns) {
requestFns.reduce((pre, cur) => pre.finally(() => cur()), Promise.resolve());
}
// 模擬一個異步請求函數
function createRequest(delay) {
return () =>
new Promise((resolve) => {
setTimeout(() => {
resolve(delay);
}, delay);
}).then((res) => {
console.log(res);
});
}
// 執行順序從左至右
const requestFns = [
createRequest(3000),
createRequest(2000),
createRequest(1000),
];
// 串行調用
runPromiseInSeq1(requestFns);
// runPromiseInSeq2(requestFns);
// runPromiseInSeq3(requestFns);
複製代碼20 行最簡異步鏈式調用
這裏模擬了 Promise 的異步鏈式調用，代碼出處見文章。
function Promise(fn) {
this.cbs = [];
const resolve = (value) => {
setTimeout(() => {
this.data = value;
this.cbs.forEach((cb) => cb(value));
});
}
fn(resolve);
}
Promise.prototype.then = function (onResolved) {
return new Promise((resolve) => {
this.cbs.push(() => {
const res = onResolved(this.data);
if (res instanceof Promise) {
res.then(resolve);
} else {
resolve(res);
}
});
});
};本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/hz0P_brF8uCu2DDtW_vgVQ