1.Promise.all的特点
1.将多个Promise实例包装成一个新的Promise实例
2.当参数所有promise全部成功时返回成功结果,且结果是所有promise返回成功结果的数数组
3.只要数组中有一个promise失败,则返回失败,结果是第一个失败的promise的值
使用场景:一共三个接口,我们需要拿到前两个接口返回的数据作为第三个接口的参数,需要使用promise.all将前两个接口作为promise传入Promise.all中,如果有一个失败了,就不会调用第三个接口
例子:
手写promise.all
<script>
function promiseAll(promises) {
return new Promise(function (resolve, reject) {
// 判断传入的参数是否为数组
if (!Array.isArray(promises)) {
throw new Error("ssss");
}
// 判断多个Promise都是fulfilled状态,引入计数器
var resolveCount = 0;
//创建一个空数组,长度为传入数组的长度
var promiseNum = promises.length;
var resolveValues = new Array(promiseNum);
//遍历传入的数组
for (let i = 0; i < promiseNum; i++) {
// 我们期望传入的数组都是Promise,所以先用Promise.reslove包裹
Promise.resolve(promises[i]).then(
function (value) {
// 因为当前只接收fulfilled状态的Promise所以会走then
resolveCount++;
//将当前返回值存储到空数组里 这个空数组是最终Promise.all的reslove的值
resolveValues[i] = value;
if (resolveCount == promiseNum) {
return resolve(resolveValues);
}
},
//如果有一个Promise的状态是rejected,会走下面的代码
function (reason) {
return reject(reason);
}
);
}
});
}
var Promise1 = Promise.reject(123);
var Promise2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 100, "foo");
});
var Promise3 = 42;
promiseAll([Promise1, Promise2, Promise3])
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
});
</script>
2.Promise.race
promise.race使用:Promise.race([p1,p2,p3])里面哪个结果获得的快,就返回那个结果
不管结果本身是成功状态还是失败状态
<script>
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("success");
}, 1000);
});
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject("failed");
}, 500);
});
function promiserace(promises) {
if (!Array.isArray(promises)) {
throw new Error("promise must be an array");
}
return new Promise(function (resolve, reject) {
promises.forEach((p) => {
//遍历Promise 无论reslove还是rejected都会改变最外层的Promise的状态
// 一旦状态拿到了 就定格不变了
Promise.resolve(p).then(
(data) => {
resolve(data);
},
(err) => {
reject(err);
}
);
});
});
}
promiserace([p1, p2])
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
});
</script>