Promise面試題2實現異步串行執(zhí)行

cikenerd 發(fā)布于2019-08-23 15:31 / 2922人閱讀

摘要：按照要求實現函數，把傳進去的函數數組按順序先后執(zhí)行，并且把返回的數據先后放到數組中。例子中我們是按順序執(zhí)行的，但是輸出的結果卻是，對于這些異步函數來說，并不會按順序執(zhí)行完一個，再執(zhí)行后一個。

按照要求：
實現 mergePromise 函數，把傳進去的函數數組按順序先后執(zhí)行，并且把返回的數據先后放到數組 data 中。

代碼如下：
const timeout = ms => new Promise((resolve, reject) => {

setTimeout(() => {
    resolve();
}, ms);

});

const ajax1 = () => timeout(2000).then(() => {

console.log("1");
return 1;

});

const ajax2 = () => timeout(1000).then(() => {

console.log("2");
return 2;

});

const ajax3 = () => timeout(2000).then(() => {

console.log("3");
return 3;

});

const mergePromise = ajaxArray => {

// 在這里實現你的代碼

};

mergePromise([ajax1, ajax2, ajax3]).then(data => {

console.log("done");
console.log(data); // data 為 [1, 2, 3]

});

// 要求分別輸出
// 1
// 2
// 3
// done
// [1, 2, 3]

分析：

timeout是一個函數，這個函數執(zhí)行后返回一個promise實例。

ajax1 、ajax2、ajax3 都是函數，不過這些函數有一些特點，執(zhí)行后都會會返回一個新的promise實例。

按題目的要求我們只要順序執(zhí)行這三個函數就好了，然后把結果放到 data 中，但是這些函數里都是異步操作，想要按順序執(zhí)行，然后輸出 1，2，3并沒有那么簡單，看個例子。

function A() {
setTimeout(function () {

  console.log("a");

}, 3000);
}

function B() {
setTimeout(function () {

  console.log("b");

}, 1000);
}

A();
B();

// b
// a

例子中我們是按順序執(zhí)行的 A，B 但是輸出的結果卻是 b，a 對于這些異步函數來說，并不會按順序執(zhí)行完一個，再執(zhí)行后一個。

這道題主要考察的是Promise 控制異步流程，我們要想辦法，讓這些函數，一個執(zhí)行完之后，再執(zhí)行下一個，代碼如何實現呢？

// 保存數組中的函數執(zhí)行后的結果
var data = [];

// Promise.resolve方法調用時不帶參數，直接返回一個resolved狀態(tài)的 Promise 對象。
var sequence = Promise.resolve();

ajaxArray.forEach(function (item) {

// 第一次的 then 方法用來執(zhí)行數組中的每個函數，
// 第二次的 then 方法接受數組中的函數執(zhí)行后返回的結果，
// 并把結果添加到 data 中，然后把 data 返回。
sequence = sequence.then(item).then(function (res) {
    data.push(res);
    return data;
});

})

// 遍歷結束后，返回一個 Promise，也就是 sequence，他的 [[PromiseValue]] 值就是 data，
// 而 data（保存數組中的函數執(zhí)行后的結果）也會作為參數，傳入下次調用的 then 方法中。
return sequence;

大概思路如下：全局定義一個promise實例sequence，循環(huán)遍歷函數數組，每次循環(huán)更新sequence，將要執(zhí)行的函數item通過sequence的then方法進行串聯，并且將執(zhí)行結果推入data數組，最后將更新的data返回，這樣保證后面sequence調用then方法，如何后面的函數需要使用data只需要將函數改為帶參數的函數。

歡迎轉發(fā)、關注、點擊好看。

GPU云服務器云服務器異步串行通信異步串行通訊 jquery_promise異步面試題

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

轉載請注明本文地址：http://systransis.cn/yun/102171.html

js異步從入門到放棄(實踐篇) — 常見寫法&面試題解析

摘要：前文該系列下的前幾篇文章分別對不同的幾種異步方案原理進行解析，本文將介紹一些實際場景和一些常見的面試題。流程調度里比較常見的一種錯誤是看似串行的寫法，可以感受一下這個例子判斷以下幾種寫法的輸出結果辨別輸出順序這類題目一般出現在面試題里。前文該系列下的前幾篇文章分別對不同的幾種異步方案原理進行解析，本文將介紹一些實際場景和一些常見的面試題。(積累不太夠，后面想到再補) 正文流程調度...

Awbeci 2019-08-23 18:05 評論0 收藏0
Promise使用細節(jié)

摘要：應用把一個異步操作和定時器放在一起。如果定時器先觸發(fā)就提示用戶超時用戶超時什么是值穿透或者期望傳入一個函數如果不是函數會發(fā)生值穿透和的第二個參數的區(qū)別比較類似是一個語法糖相當于還有一點區(qū)別就是如果第一個報錯第二個無法捕獲。 Promise使用細節(jié) 使用promise需要注意的幾點: 1.如何用promise實現并行的異步 (Promise.all配合.map) Promise.all...

fnngj 2019-08-22 16:31 評論0 收藏0
帝都寒冬一年經驗前端面試總結

摘要：不過幸運的是所有面試的公司都給了，在這里總結下經驗吧。這里推薦下我當時看的一篇的面經，木易楊老師寫的大廠高級前端面試題匯總。前言本人畢業(yè)一年，最近陸續(xù)面試了頭條、瓜子、360、猿輔導、中信銀行、老虎等公司，由于最近比較寒冬而且招1-3年的并不多，再加上自己對公司規(guī)模和位置有一定要求，所以最后合適的也就這幾家了。不過幸運的是所有面試的公司都給了offer，在這里總結下經驗吧。掘金：h...

Scott 2019-08-26 10:24 評論0 收藏0
JavaScript 異步隊列及Co實現

摘要：在中，又由于單線程的原因，異步編程又是非常重要的。方法有很多，，，觀察者，，，這些中處理異步編程的，都可以做到這種串行的需求。引入隊列對于任何語言來說都是重要的，io 的串行，請求的并行等等。在 JavaScript 中，又由于單線程的原因，異步編程又是非常重要的。昨天由一道面試題的啟發(fā)，我去實現 JS 中的異步隊列的時候，借鑒了 express 中間件思想，并發(fā)散到 co 實現 ...

LdhAndroid 2019-08-21 16:49 評論0 收藏0
用一道大廠面試題帶你搞懂事件循環(huán)機制

本文涵蓋面試題的引入對事件循環(huán)面試題執(zhí)行順序的一些疑問通過面試題對微任務、事件循環(huán)、定時器等對深入理解結論總結面試題面試題如下，大家可以先試著寫一下輸出結果，然后再看我下面的詳細講解，看看會不會有什么出入，如果把整個順序弄清楚 Node.js 的執(zhí)行順序應該就沒問題了。 async function async1(){ console.log(async1 start) ...

ShowerSun 2019-08-26 10:57 評論0 收藏0