【前端面试题】Promise的使用(异步编程、回调地狱)https://blog.csdn.net/weixin_46318413/article/details/122027650是什么?
Promise.all() 方法接收一个promise的iterable类型(注:Array,Map,Set都属于ES6的iterable类型)的输入,并且只返回一个Promise实例, 那个输入的所有promise的resolve回调的结果是一个数组。这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束,或者输入的iterable里没有promise了的时候。它的reject回调执行是,只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误,并且reject的是第一个抛出的错误信息。
情形一:所有输入的promise的resolve回调都结束,才能输出promise.all的回调
//定义p1是在1秒后执行结果为{name: 'dai'}的promise的对象
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: 'dai'
});
}, 1000);
})
//定义p2是在2秒后执行结果为222的promise的对象
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(222);
}, 2000);
})
//Promise.all() 方法接收一个promise的iterable类型,判断传入的每一个对象是否都成功并返回一个数组,否则会报错
//因为要等两个promise全部执行完才进行输出,由于p2需要两秒后执行,所以会在两秒后将两个执行结果一起输出
Promise.all([p1, p2]).then(res => {
console.log(res);//输出为[{name:'dai'},222]
})
情形二:只要任何一个输入的promise的reject回调执行,就会立即抛出错误,并且reject的是第一个抛出的错误信息
//定义p1是在1秒后执行结果为{name: 'dai'}的promise的对象
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(111);
}, 1000);
})
//定义p2是在2秒后执行结果为222的promise的对象
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(222);
}, 2000);
})
Promise.all([p1, p2]).then((res) => {
console.log(res)//报错输出111
})
如何手写Promise.all函数?
//定义p1是在1秒后执行结果为{name: 'dai'}的promise的对象
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: 'dai'
});
}, 1000);
})
//定义p2是在2秒后执行结果为222的promise的对象
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(222);
}, 2000);
})
//手写一个promise.all
function myPromiseAll(lists) {
return new Promise((resolve, reject) => {
let resArr = [];//定义执行结果
let n = 0;//判断是否全部
lists.forEach(list => {
list.then(item => {
//把输入数组中的每一个promise的执行结果push到resArr中
resArr.push(item);
n++;
//通过n判断是否执行结束
if (n === lists.length) {
return resolve(resArr)
}
}, (reason) => {
//如果遇到有一个reject,立马结束并输出第一个reject
return reject(reason);
})
});
})
}
//因为返回的是Promise对象,所以要通过then拿到执行结果
myPromiseAll([p1, p2]).then(res => {
console.log(res)//输出[{name:'dai'},222]
})
以上就是Promise.all的机制以及手写方法。
我是前端Dai,一个会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享的coder,希望大家一起进步,加油。