国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

精讀《用 Reduce 實(shí)現(xiàn) Promise 串行執(zhí)行》

JinB / 3010人閱讀

摘要：引言本周精讀的文章是，講了如何利用實(shí)現(xiàn)串行執(zhí)行。總結(jié)串行隊(duì)列一般情況下用的不多，因?yàn)榇袝?huì)阻塞，而用戶交互往往是并行的。更多討論討論地址是精讀用實(shí)現(xiàn)串行執(zhí)行如果你想?yún)⑴c討論，請(qǐng)點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。

1 引言

本周精讀的文章是 why-using-reduce-to-sequentially-resolve-promises-works，講了如何利用 reduce 實(shí)現(xiàn) Promise 串行執(zhí)行。

在 async/await 以前 Promise 串行執(zhí)行還是比較麻煩的，希望根據(jù)這篇文章可以理清楚串行 Promise 的思維脈絡(luò)。

2 概述

除了依賴 async promise-fun 等工具庫(kù)，最常用的隊(duì)列操作就是 Array.prototype.reduce() 了：

let result = [1, 2, 5].reduce((accumulator, item) => {
  return accumulator + item;
}, 0); // <-- Our initial value.

console.log(result); // 8

最后一個(gè)值 0 是起始值，每次 reduce 返回的值都會(huì)作為下次 reduce 回調(diào)函數(shù)的第一個(gè)參數(shù)，直到隊(duì)列循環(huán)完畢，因此可以進(jìn)行累加計(jì)算。

那么將 reduce 的特性用在 Promise 試試：

function runPromiseByQueue(myPromises) {
  myPromises.reduce(
    (previousPromise, nextPromise) => previousPromise.then(() => nextPromise()),
    Promise.resolve()
  );
}

當(dāng)上一個(gè) Promise 開(kāi)始執(zhí)行（previousPromise.then），當(dāng)其執(zhí)行完畢后再調(diào)用下一個(gè) Promise，并作為一個(gè)新 Promise 返回，下次迭代就會(huì)繼續(xù)這個(gè)循環(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 3
3 精讀

Reduce 是同步執(zhí)行的，在一個(gè)事件循環(huán)就會(huì)完成（更多請(qǐng)參考 精讀《Javascript 事件循環(huán)與異步》），但這僅僅是在內(nèi)存快速構(gòu)造了 Promise 執(zhí)行隊(duì)列，展開(kāi)如下：

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)存中生成這個(gè)隊(duì)列，而不需要把這個(gè)冗余的隊(duì)列寫(xiě)在代碼里！

更簡(jiǎn)單的方法

感謝 eos3tion 同學(xué)補(bǔ)充，在 async/await 的支持下，runPromiseByQueue 函數(shù)可以更為簡(jiǎn)化：

async function runPromiseByQueue(myPromises) {
  for (let value of myPromises) {
    await value();
  }
}

多虧了 async/await，代碼看起來(lái)如此簡(jiǎn)潔明了。

不過(guò)要注意，這個(gè)思路與 reduce 思路不同之處在于，利用 reduce 的函數(shù)整體是個(gè)同步函數(shù)，自己先執(zhí)行完畢構(gòu)造 Promise 隊(duì)列，然后在內(nèi)存異步執(zhí)行；而利用 async/await 的函數(shù)是利用將自己改造為一個(gè)異步函數(shù)，等待每一個(gè) Promise 執(zhí)行完畢。

更多 Promise 拓展

天豬 同學(xué)分享的 promise-fun 除了串行 Promise 解決方案，還提供了一系列 Promise 功能拓展（有一些逐漸被 ES 標(biāo)準(zhǔn)采納，比如 finally 已經(jīng)進(jìn)入 Stage 4），如果你的項(xiàng)目還無(wú)法使用 async/await，是不需要自己重新寫(xiě)一遍的，當(dāng)然本文的原理還是需要好好理解。

Stage 相關(guān)可以進(jìn)行拓展閱讀 精讀《TC39 與 ECMAScript 提案》。
4 總結(jié)

Promise 串行隊(duì)列一般情況下用的不多，因?yàn)榇袝?huì)阻塞，而用戶交互往往是并行的。那么對(duì)于并行發(fā)請(qǐng)求，前端按串行順序接收 Response 也是一個(gè)有意思的話題，留給大家思考。

5 更多討論 
討論地址是：精讀《用 Reduce 實(shí)現(xiàn) Promise 串行執(zhí)行》 · Issue #109 · dt-fe/weekly

如果你想?yún)⑴c討論，請(qǐng)點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。前端精讀 - 幫你篩選靠譜的內(nèi)容。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/98799.html

相關(guān)文章

  • 每周分享第 1 期

    摘要：由于微信不能訪問(wèn)外鏈，需要點(diǎn)擊頁(yè)尾左下角的閱讀原文，才能訪問(wèn)本文中的鏈接。接下來(lái)讓我?guī)阕哌M(jìn)高級(jí)前端的世界，在進(jìn)階的路上，共勉如果你想加群討論每期面試知識(shí)點(diǎn)，公眾號(hào)回復(fù)加群即可 （關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）showImg(https://segmentfault.com/img/remote/1460000...

    Carbs 評(píng)論0 收藏0

  • 深入理解Webpack核心模塊Tapable鉤子[異步版]

    摘要：接上一篇文章深入理解核心模塊鉤子同步版中三個(gè)注冊(cè)方法同步注冊(cè)的是中對(duì)三個(gè)觸發(fā)方法這一章節(jié)我們將分別實(shí)現(xiàn)異步的版本和版本異步鉤子的版本的版本的版本異步的鉤子分為并行和串行的鉤子，并行是指等待所有并發(fā)的異步事件執(zhí)行之后再執(zhí)行最終的異步回調(diào)。 接上一篇文章 深入理解Webpack核心模塊WTApable鉤子(同步版) tapable中三個(gè)注冊(cè)方法 1 tap(同步) 2 tapAsync(...

    AlphaWallet 評(píng)論0 收藏0

  • JavaScript 并行和串行任務(wù)/流程控制 的實(shí)現(xiàn)

    摘要：并行和串行任務(wù)在里面異步是一個(gè)很重要的知識(shí)點(diǎn)的異步跟其他語(yǔ)言不一樣他是根據(jù)執(zhí)行回調(diào)的方式來(lái)實(shí)現(xiàn)的。在之前，執(zhí)行任務(wù)想要實(shí)現(xiàn)這個(gè)流程控制只能通過(guò)依賴來(lái)實(shí)現(xiàn)或者通過(guò)而在之后官方自己實(shí)現(xiàn)了和來(lái)實(shí)現(xiàn)。 JavaScript 并行和串行任務(wù) 在 JavaScript 里面 異步 是一個(gè)很重要的知識(shí)點(diǎn),JS 的異步跟其他語(yǔ)言不一樣, 他是根據(jù)執(zhí)行回調(diào)的方式來(lái) 實(shí)現(xiàn)的。由于我們不知道異步什么時(shí)候會(huì)...

    bladefury 評(píng)論0 收藏0

  • 行星工單系統(tǒng)部分實(shí)現(xiàn)(1)-流程控制

    摘要：為使客服同學(xué)有序協(xié)同處理客戶問(wèn)題客服技術(shù)團(tuán)隊(duì)打造了多渠道整合的，可靈活配置的，便于流轉(zhuǎn)的行星工單系統(tǒng)。所以根據(jù)這個(gè)處理思路，我們建立工單系統(tǒng)的流程控制方案。據(jù)此，我們用類(lèi)管道函數(shù)實(shí)現(xiàn)了簡(jiǎn)單的流程控制。行為傳參通過(guò)標(biāo)志指定，僅能指定單行為。 1.工單系統(tǒng)的表格頁(yè) 工單系統(tǒng)是一種網(wǎng)絡(luò)軟件系統(tǒng)，根據(jù)不同組織，部門(mén)和外部客戶的需求，來(lái)由針對(duì)的管理，維護(hù)和追蹤一系列的問(wèn)題和請(qǐng)求。大多用于記錄、處...

    lijy91 評(píng)論0 收藏0

  • 精讀《怎么用 React Hooks 造輪子》

    摘要：可以看到，這樣不僅沒(méi)有占用組件自己的，也不需要手寫(xiě)回調(diào)函數(shù)進(jìn)行處理，這些處理都?jí)嚎s成了一行。效果通過(guò)拿到周期才執(zhí)行的回調(diào)函數(shù)。實(shí)現(xiàn)等價(jià)于的回調(diào)僅執(zhí)行一次時(shí)，因此直接把回調(diào)函數(shù)拋出來(lái)即可。 1 引言 上周的 精讀《React Hooks》 已經(jīng)實(shí)現(xiàn)了對(duì) React Hooks 的基本認(rèn)知，也許你也看了 React Hooks 基本實(shí)現(xiàn)剖析（就是數(shù)組），但理解實(shí)現(xiàn)原理就可以用好了嗎？學(xué)的是...

    Shihira 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<