(立下flag)每日10道前端面试题-16 关于【Promise】十问(1)

第五问:Promise 的业界实现都有哪些?


1) promise可以支持多个并发的请求,获取并发请求中的数据

2)promise可以解决可读性的问题,异步的嵌套带来的可读性的问题,它是由异步的运行机制引起的,这样的代码读起来会非常吃力

第六问: Promise的问题?解决办法?


promise的问题为:

promise一旦执行,无法中途取消

promise的错误无法在外部被捕捉到,只能在内部进行预判处理

promise的内如何执行,监测起来很难

解决办法

正是因为这些原因,ES7引入了更加灵活多变的async,await来处理异步

第七问:老旧浏览器没有Promise全局对象增么办?


果辛辛苦苦写完代码,测试后发现不兼容IE6、7增么办?难道要推翻用回调函数重写?当然不是这样,轮子早就造好了。

我们可以使用es6-promise-polyfill。es6-promise-polyfill可以使用页面标签直接引入,可以通过es6的import方法引入(如果你是用webpack),在node中可以使用require引入,也可以在Seajs中作为依赖引入。

引入这个polyfill之后,它会在window对象中加入Promise对象。这样我们就可以全局使用Promise了。

第八问:怎么让一个函数无论promise对象成功和失败都能被调用?


笨方法:

在两个回调中分别执行一次函数。

推荐方式:

扩展一个 Promise.finally(),finally方法用于指定不管Promise对象最后状态如何,都会执行的操作,它与done方法的最大区别在于,它接受一个普通的回调函数作为参数,该函数不管怎样都必须执行。

//添加finally方法

Promise.prototype.finally=function (callback) {

var p=this.constructor;

return this.then(//只要是promise对象就可以调用then方法

value => p.resolve(callback()).then(() => value),

reason => p.resolve(callback()).then(() => {throw reason})

);

}

对finally方法的理解:

(1)p.resolve(callback())这句函数callback已经执行

(2)finally方法return的是一个promise对象,所以还可以继续链式调用其他方法

(3)对于Promise.resolve方法

Promise.resolve(‘foo’);

等价于

new Promise(resolve => resolve(‘foo’));

所以可以通过then方法的回调函数 接受 实例对象返回的参数

比如:

Promise.resolve(function(){console.log(2);}).then(function(cb){cb()})

第九问:红灯3秒亮一次,绿灯1秒亮一次,黄灯2秒亮一次;如何让三个灯不断交替重复亮灯?(用Promise实现)三个亮灯函数已经存在:


function red() {

console.log(‘red’);

}

function green() {

console.log(‘green’);

}

function yellow() {

console.log(‘yellow’);

}

解析

红灯3秒亮一次,绿灯1秒亮一次 ,黄灯2秒亮一次,意思就是3秒执行一次red函数,2秒执行一次green函数,1秒执行一次yellow函数,不断交替重复亮灯,意思就是按照这个顺序一直执行这3个函数,这步可以利用递归来实现。

答案:

function red() {

console.log(‘red’);

}

function green() {

console.log(‘green’);

}

function yellow() {

console.log(‘yellow’);

}

var light = function (timmer, cb) {

return new Promise(function (resolve, reject) {

setTimeout(function () {

cb();

resolve();

}, timmer);

});

};

var step = function () {

Promise.resolve().then(function () {

return light(3000, red);

}).then(function () {

return light(2000, green);

}).then(function () {

return light(1000, yellow);

}).then(function () {

step();

});

}

step();

第十问:实现 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]

解析

首先 ajax1 、ajax2、ajax3 都是函数,只是这些函数执行后会返回一个 Promise,按题目的要求我们只要顺序执行这三个函数就好了,然后把结果放到 data 中,但是这些函数里都是异步操作,想要按顺序执行,然后输出 1,2,3并没有那么简单,看个例子。

function A() {

setTimeout(function () {

console.log(‘a’);

}, 3000);

}

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
img
img
img
img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新

如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
img

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等

一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
img

**

如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
[外链图片转存中…(img-Hk3T75vU-1712970625513)]

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等

[外链图片转存中…(img-2VVFLIpe-1712970625514)]

一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-fXyc1iNA-1712970625514)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值