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

3）事件监听：任务的执行不取决于代码的顺序，而取决于某个事件是否发生

4）Generator函数虽然将异步操作表示得很简洁，但是流程管理却不方便（即何时执行第一阶段、何时执行第二阶段）。即如何实现自动化的流程管理

5）async/await

第四问：Promise 如何使用？

---

1）创造一个Promise实例

2）Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数

3）可用Promise的try和catch方法预防异常

第五问：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

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

ata 为 [1, 2, 3]

});

// 要求分别输出

// 1

// 2

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-n62LD3xC-1714205302516)]