Promise技術點-面試實戰版
本文旨在使用一個易於理解、易於記憶的方式去吃透promise相關應用側的技術點，從而應用於簡歷和麪試中。比起其餘大佬的文章，本文更注重於實戰性，同時也會盡量的去提升代碼規範和質量（我的水平受限沒法給出最優解）。俗話說的好，貪多嚼不爛，想要深刻了解更多實現方法和細節的同窗能夠補充看更多更加優秀的文章。javascript
超時控制
背景
- 衆所周知，fetch請求是沒法設置超時時間的，所以咱們須要本身去模擬一個超時控制。
- 轉盤問題，一個抽獎轉盤動畫效果有5秒，可是通常來講向後端請求轉盤結果只須要不到一秒，所以請求結果至少得等5秒才能展示給用戶。
問題分析
首先，超時控制比較簡單，和Promise.race()的思想是相似，或者能夠直接使用這個函數去解決。java
而後，轉盤問題若是要答好，須要考慮兩種狀況。ios
-
轉盤動畫還未完成，請求結果已經拿到了，此時要等到動畫完成再展現結果給用戶。git
-
轉盤動畫完成了，請求結果還未拿到，此時須要等待結果返回（能夠設置請求超時時間）。github
因此，轉盤問題更適合用Promise.all()來解決。web
實戰版源碼
代碼分爲多個版本，從上自下，記憶難度遞增但面試成績更優，請按需選擇。面試
1、基於Promise.race()的超時控制。axios
/** * 超時控制版本一 */
/** * 輔助函數，封裝一個延時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));
複製代碼
2、將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));
複製代碼
3、基於Promise.all()的轉盤問題（不考慮請求超時），和上面略有不一樣的是sleep函數超時後Promise從pending態轉到fulfilled態而不是rejected態。api
/** * 轉盤問題不考慮超時 */
/** * 輔助函數，封裝一個延時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()}-${Math.floor(Math.random() * 1000)}`;
};
PromiseManager.prototype.push = function (...requestFns) {
for (const requestFn of requestFns) {
const key = this.generateKey();
this.pendingPromise.add(key);
this.loading = true;
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);
}
});
});
};
複製代碼
相關文章
- 1. 2015面試的技術點
- 2. Android 面試技術點
- 3. ios面試技術要點
- 4. iOS面試—0、技術點
- 5. ES6 Promise實戰筆試題
- 6. Vue 實戰實用技術點
- 7. Promise 實戰
- 8. PHP面試技術點準備
- 9. 阿里巴巴面試技術要點
- 10. 十個Android面試技術知識點
- 更多相關文章...
- • XML 相關技術 - XML 教程
- • Hibernate的快照技術 - Hibernate教程
- • Docker容器實戰(一) - 封神Server端技術
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 2015面試的技術點
- 2. Android 面試技術點
- 3. ios面試技術要點
- 4. iOS面試—0、技術點
- 5. ES6 Promise實戰筆試題
- 6. Vue 實戰實用技術點
- 7. Promise 實戰
- 8. PHP面試技術點準備
- 9. 阿里巴巴面試技術要點
- 10. 十個Android面試技術知識點