Promise面试题2完成异步串行实行

根据请求:
完成 mergePromise 函数,把传进去的函数数组按递次前后实行,而且把返回的数据前后放到数组 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是一个函数,这个函数实行后返回一个promise实例。

ajax1 、ajax2、ajax3 都是函数,不过这些函数有一些特性,实行后都会会返回一个 新的promise实例。

按问题的请求我们只需递次实行这三个函数就好了,然后把效果放到 data 中,然则这些函数里都是异步操纵,想要按递次实行,然后输出 1,2,3并没有那末简朴,看个例子。

function A() {
setTimeout(function () {

  console.log('a');

}, 3000);
}

function B() {
setTimeout(function () {

  console.log('b');

}, 1000);
}

A();
B();

// b
// a

例子中我们是按递次实行的 A,B 然则输出的效果倒是 b,a 关于这些异步函数来讲,并不会按递次实行完一个,再实行后一个。

这道题重要考核的是Promise 掌握异步流程,我们要想要领,让这些函数,一个实行完以后,再实行下一个,代码怎样完成呢?

// 保留数组中的函数实行后的效果
var data = [];

// Promise.resolve要领挪用时不带参数,直接返回一个resolved状况的 Promise 对象。
var sequence = Promise.resolve();

ajaxArray.forEach(function (item) {

// 第一次的 then 要领用来实行数组中的每一个函数,
// 第二次的 then 要领接收数组中的函数实行后返回的效果,
// 并把效果添加到 data 中,然后把 data 返回。
sequence = sequence.then(item).then(function (res) {
    data.push(res);
    return data;
});

})

// 遍历完毕后,返回一个 Promise,也就是 sequence, 他的 [[PromiseValue]] 值就是 data,
// 而 data(保留数组中的函数实行后的效果) 也会作为参数,传入下次挪用的 then 要领中。
return sequence;

也许思绪以下:全局定义一个promise实例sequence,轮回遍历函数数组,每次轮回更新sequence,将要实行的函数item经由过程sequence的then要领举行串连,而且将实行效果推入data数组,末了将更新的data返回,如许保证背面sequence挪用then要领,怎样背面的函数须要运用data只须要将函数改成带参数的函数。

迎接转发、关注、点击悦目。

    原文作者:假前端
    原文地址: https://segmentfault.com/a/1190000018319900
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞