資訊專欄INFORMATION COLUMN
摘要：引言本周精讀的文章是，講了如何利用實現(xiàn)串行執(zhí)行。總結(jié)串行隊列一般情況下用的不多，因為串行會阻塞，而用戶交互往往是并行的。更多討論討論地址是精讀用實現(xiàn)串行執(zhí)行如果你想?yún)⑴c討論，請點擊這里，每周都有新的主題，周末或周一發(fā)布。
1 引言
本周精讀的文章是 why-using-reduce-to-sequentially-resolve-promises-works，講了如何利用 reduce 實現(xiàn) Promise 串行執(zhí)行。
在 async/await 以前 Promise 串行執(zhí)行還是比較麻煩的，希望根據(jù)這篇文章可以理清楚串行 Promise 的思維脈絡(luò)。
2 概述除了依賴 async promise-fun 等工具庫，最常用的隊列操作就是 Array.prototype.reduce() 了：
let result = [1, 2, 5].reduce((accumulator, item) => {
return accumulator + item;
}, 0); // <-- Our initial value.
console.log(result); // 8
最后一個值 0 是起始值，每次 reduce 返回的值都會作為下次 reduce 回調(diào)函數(shù)的第一個參數(shù)，直到隊列循環(huán)完畢，因此可以進(jìn)行累加計算。
那么將 reduce 的特性用在 Promise 試試：
function runPromiseByQueue(myPromises) {
myPromises.reduce(
(previousPromise, nextPromise) => previousPromise.then(() => nextPromise()),
Promise.resolve()
);
}
當(dāng)上一個 Promise 開始執(zhí)行（previousPromise.then），當(dāng)其執(zhí)行完畢后再調(diào)用下一個 Promise，并作為一個新 Promise 返回，下次迭代就會繼續(xù)這個循環(huán)。
const createPromise = (time, id) => () =>
new Promise(solve =>
setTimeout(() => {
console.log("promise", id);
solve();
}, time)
);
runPromiseByQueue([
createPromise(3000, 1),
createPromise(2000, 2),
createPromise(1000, 3)
]);
得到的輸出是：
promise 1 promise 2 promise 33 精讀
Reduce 是同步執(zhí)行的，在一個事件循環(huán)就會完成（更多請參考 精讀《Javascript 事件循環(huán)與異步》），但這僅僅是在內(nèi)存快速構(gòu)造了 Promise 執(zhí)行隊列，展開如下：
new Promise((resolve, reject) => {
// Promise #1
resolve();
})
.then(result => {
// Promise #2
return result;
})
.then(result => {
// Promise #3
return result;
}); // ... and so on!
Reduce 的作用就是在內(nèi)存中生成這個隊列，而不需要把這個冗余的隊列寫在代碼里！
更簡單的方法感謝 eos3tion 同學(xué)補(bǔ)充，在 async/await 的支持下，runPromiseByQueue 函數(shù)可以更為簡化：
async function runPromiseByQueue(myPromises) {
for (let value of myPromises) {
await value();
}
}
多虧了 async/await，代碼看起來如此簡潔明了。
不過要注意，這個思路與 reduce 思路不同之處在于，利用 reduce 的函數(shù)整體是個同步函數(shù)，自己先執(zhí)行完畢構(gòu)造 Promise 隊列，然后在內(nèi)存異步執(zhí)行；而利用 async/await 的函數(shù)是利用將自己改造為一個異步函數(shù)，等待每一個 Promise 執(zhí)行完畢。
更多 Promise 拓展天豬 同學(xué)分享的 promise-fun 除了串行 Promise 解決方案，還提供了一系列 Promise 功能拓展（有一些逐漸被 ES 標(biāo)準(zhǔn)采納，比如 finally 已經(jīng)進(jìn)入 Stage 4），如果你的項目還無法使用 async/await，是不需要自己重新寫一遍的，當(dāng)然本文的原理還是需要好好理解。
Stage 相關(guān)可以進(jìn)行拓展閱讀 精讀《TC39 與 ECMAScript 提案》。4 總結(jié)
Promise 串行隊列一般情況下用的不多，因為串行會阻塞，而用戶交互往往是并行的。那么對于并行發(fā)請求，前端按串行順序接收 Response 也是一個有意思的話題，留給大家思考。
5 更多討論討論地址是：精讀《用 Reduce 實現(xiàn) Promise 串行執(zhí)行》 · Issue #109 · dt-fe/weekly
如果你想?yún)⑴c討論，請點擊這里，每周都有新的主題，周末或周一發(fā)布。前端精讀 - 幫你篩選靠譜的內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98799.html
摘要：接上一篇文章深入理解核心模塊鉤子同步版中三個注冊方法同步注冊的是中對三個觸發(fā)方法這一章節(jié)我們將分別實現(xiàn)異步的版本和版本異步鉤子的版本的版本的版本異步的鉤子分為并行和串行的鉤子，并行是指等待所有并發(fā)的異步事件執(zhí)行之后再執(zhí)行最終的異步回調(diào)。 接上一篇文章 深入理解Webpack核心模塊WTApable鉤子(同步版) tapable中三個注冊方法 1 tap(同步) 2 tapAsync(...
摘要：并行和串行任務(wù)在里面異步是一個很重要的知識點的異步跟其他語言不一樣他是根據(jù)執(zhí)行回調(diào)的方式來實現(xiàn)的。在之前，執(zhí)行任務(wù)想要實現(xiàn)這個流程控制只能通過依賴來實現(xiàn)或者通過而在之后官方自己實現(xiàn)了和來實現(xiàn)。 JavaScript 并行和串行任務(wù) 在 JavaScript 里面 異步 是一個很重要的知識點,JS 的異步跟其他語言不一樣, 他是根據(jù)執(zhí)行回調(diào)的方式來 實現(xiàn)的。由于我們不知道異步什么時候會...
摘要：為使客服同學(xué)有序協(xié)同處理客戶問題客服技術(shù)團(tuán)隊打造了多渠道整合的，可靈活配置的，便于流轉(zhuǎn)的行星工單系統(tǒng)。所以根據(jù)這個處理思路，我們建立工單系統(tǒng)的流程控制方案。據(jù)此，我們用類管道函數(shù)實現(xiàn)了簡單的流程控制。行為傳參通過標(biāo)志指定，僅能指定單行為。 1.工單系統(tǒng)的表格頁 工單系統(tǒng)是一種網(wǎng)絡(luò)軟件系統(tǒng)，根據(jù)不同組織，部門和外部客戶的需求，來由針對的管理，維護(hù)和追蹤一系列的問題和請求。大多用于記錄、處...
摘要：可以看到，這樣不僅沒有占用組件自己的，也不需要手寫回調(diào)函數(shù)進(jìn)行處理，這些處理都壓縮成了一行。效果通過拿到周期才執(zhí)行的回調(diào)函數(shù)。實現(xiàn)等價于的回調(diào)僅執(zhí)行一次時，因此直接把回調(diào)函數(shù)拋出來即可。 1 引言 上周的 精讀《React Hooks》 已經(jīng)實現(xiàn)了對 React Hooks 的基本認(rèn)知，也許你也看了 React Hooks 基本實現(xiàn)剖析（就是數(shù)組），但理解實現(xiàn)原理就可以用好了嗎？學(xué)的是...
閱讀 2652·2021-09-09 09:33
閱讀 2810·2019-08-30 15:54
閱讀 2867·2019-08-30 14:21
閱讀 2356·2019-08-29 17:15
閱讀 3580·2019-08-29 16:13
閱讀 2759·2019-08-29 14:21
閱讀 3422·2019-08-26 13:25
閱讀 2028·2019-08-26 12:14
