当前位置: 首页 > news >正文

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只需要将函数改为带参数的函数。

欢迎转发、关注、点击好看。

相关文章:

  • Flex的一些总结
  • SAP ERP和C4C Account和Contact的双向同步
  • Spring源码解析—— ClassPathResource类
  • Angular6错误 Service: No provider for Renderer2
  • 01串(dp)
  • 通用排序工具类
  • Python 进行 URL 跳转
  • 安卓使用Root权限实现后台模拟全局按键、触屏事件方法(类似按键精灵)
  • 第13期 DApp 榜单 :来,吃我这波安利
  • java swing启动时窗口最大化
  • 一行代码迁移TensorFlow 1.x到TensorFlow 2.0
  • Oracle 12c 数据库中scott用户不存在的解决方法
  • redis使用场景和java测试案例
  • 数据库迁移
  • 无监督学习新突破!华为美研所提出自动编码变换网络AET
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • 30秒的PHP代码片段(1)数组 - Array
  • Android单元测试 - 几个重要问题
  • Angularjs之国际化
  • CSS 三角实现
  • CSS盒模型深入
  • JavaScript 基本功--面试宝典
  • js中的正则表达式入门
  • LeetCode18.四数之和 JavaScript
  • MYSQL如何对数据进行自动化升级--以如果某数据表存在并且某字段不存在时则执行更新操作为例...
  • Nginx 通过 Lua + Redis 实现动态封禁 IP
  • PHP 程序员也能做的 Java 开发 30分钟使用 netty 轻松打造一个高性能 websocket 服务...
  • Python连接Oracle
  • Vim Clutch | 面向脚踏板编程……
  • 和 || 运算
  • 力扣(LeetCode)21
  • 悄悄地说一个bug
  • 区块链技术特点之去中心化特性
  • 山寨一个 Promise
  • 系统认识JavaScript正则表达式
  • 鱼骨图 - 如何绘制?
  • 我们雇佣了一只大猴子...
  • ​无人机石油管道巡检方案新亮点:灵活准确又高效
  • #LLM入门|Prompt#2.3_对查询任务进行分类|意图分析_Classification
  • #NOIP 2014# day.1 T3 飞扬的小鸟 bird
  • $.ajax中的eval及dataType
  • (3)Dubbo启动时qos-server can not bind localhost22222错误解决
  • (LeetCode C++)盛最多水的容器
  • (zz)子曾经曰过:先有司,赦小过,举贤才
  • (附源码)ssm经济信息门户网站 毕业设计 141634
  • (深度全面解析)ChatGPT的重大更新给创业者带来了哪些红利机会
  • (数位dp) 算法竞赛入门到进阶 书本题集
  • (一)为什么要选择C++
  • (转)ObjectiveC 深浅拷贝学习
  • ./和../以及/和~之间的区别
  • .[hudsonL@cock.li].mkp勒索病毒数据怎么处理|数据解密恢复
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .NET Framework杂记
  • .net 重复调用webservice_Java RMI 远程调用详解,优劣势说明
  • .php结尾的域名,【php】php正则截取url中域名后的内容