Promise高级用法
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
串行API
提示:这里可以添加本文要记录的大概内容:
1、案例:实现一个promise队列----传入一个promise数组,一次串行执行并输出他们的成功或者失败结果
提示:以下是本篇文章正文内容,下面案例可供参考
一、思路总结
promise串行的实现基本思路是:
1、第一种是在前一个promise处于解决状态后执行下一个promise(也就是then方法中)
2、第二种则是通过递归调用的思路来依次执行promise
二、实现
1.代码实现
代码如下(示例):基于递归思想实现
function queuePromise(promiseArr) {
return new Promise((resolve, reject) => {
let arrLen = promiseArr.length;
let resArr = [];
if (!Array.isArray(promiseArr) || arrLen === 0) return console.error('必须传入非空数组!', Array.isArray(promiseArr) , arrLen);
let ArrStatus = promiseArr.every(item => {
return item instanceof Promise;
});
if (!ArrStatus) return console.error('数组第每一项必须是promise');
try {
let num = 0;
function run(num) {
if (num >= arrLen) {
resolve(resArr);
return;
};
console.log('开始执行:'+num);
promiseArr[num].then((res) => {
resArr.push({
status: 1,
res,
});
console.log(res + '=>');
run(++num);
}, err => {
console.log(err + '-->');
resArr.push({
status: 0,
err,
});
run(++num);
});
};
run(num);
} catch (error) {
reject(error);
}
})
};
let arr = [new Promise(resolve => {
setTimeout(_ => {
resolve('3s');
}, 3000);
}), new Promise(resolve => {
setTimeout(_ => {
resolve('8s');
}, 3000);
}), new Promise((resolve, reject) => {
setTimeout(_ => {
resolve('18s');
// reject('18s');
}, 3000);
})];
// queuePromise(arr).then(res => {
// console.log('queuePromise=>', res);
// }).catch(err => {
// console.log('queuePromise-err=>', err);
// });
并行API
提示:这里可以添加本文要记录的大概内容:
1、案例:实现一个promise.All这样的并行API
提示:以下是本篇文章正文内容,下面案例可供参考
一、思路总结
promise并行的实现基本思路是:
1、第一种是for循环的实现方式,但是值得注意的是:
- 如果是异步写法for()、for of 和arr.forEach()实现是一致的都是互不干扰的并行模式
- 如果是async await的同步写法for()、for of实现将会是阻塞的串行方式,但是arr.forEach实现仍然是并行效果,因为forEach方法运行时候会独立开启自调用函数作用域
- 但是这两种实现并行都是没有固定开始执行顺序的
2、第二种通过arr.reduce取迭代执行,这只实现并行效果因为胃任务队列的原因会有先后执行的顺序
二、实现
1.代码实现
代码如下(示例):基于reduce思想实现
// 并行 但是由于微任务机制它们执行纯在先后顺序
let allPromise = (promiseArr) => {
let arrLen = promiseArr.length;
let resArr = [];
if (!Array.isArray(promiseArr) || arrLen === 0) return console.error('必须传入非空数组!', Array.isArray(promiseArr) , arrLen);
let ArrStatus = promiseArr.every(item => {
return item instanceof Promise;
});
if (!ArrStatus) return console.error('数组第每一项必须是promise');
return new Promise((resolve, reject) => {
// console.log('quePromise+>', Array(...Array(arrLen).keys()));
Array(...Array(arrLen).keys()).reduce((promise, index) => {
console.log('------>', index, promise);
return promiseArr[index].then(res=> {
resArr.push({
status: 1,
res,
});
console.log(res + '=>');
(index == arrLen - 1) && resolve(resArr);
}, err => {
resArr.push({
status: 0,
err,
});
console.log(err + '-->');
(index == arrLen - 1) && resolve(resArr);
});
}, Promise.resolve('1'));
});
}
quePromise(arr).then(res => {
console.log('quePromise:', res);
})
代码如下(示例):基于forEach思想实现
// 实现promise.all----并行
let promiseAll = function(promiseArr) {
let arrLen = promiseArr.length;
let resoveCount = 0;
let resArr = new Array(arrLen);
if (!Array.isArray(promiseArr) || arrLen === 0) return console.error('必须传入非空数组!', Array.isArray(promiseArr) , arrLen);
let ArrStatus = promiseArr.every(item => {
return item instanceof Promise;
});
if (!ArrStatus) return console.error('数组第每一项必须是promise');
return new Promise((resolve, reject) => {
promiseArr.forEach((promise, index) => {
promise.then(res => {
resArr[index] = res;
resoveCount ++;
if (resoveCount === arrLen) resolve(resArr);
}, err => {
reject(err);
});
});
}
代码如下(示例):基于forEach思想实现
// promise.race ---并行
function promiseRace(promiseArr) {
let arrLen = promiseArr.length;
let status = false;
if (!Array.isArray(promiseArr) || arrLen === 0) return console.error('必须传入非空数组!', Array.isArray(promiseArr) , arrLen);
let ArrStatus = promiseArr.every(item => {
return item instanceof Promise;
});
if (!ArrStatus) return console.error('数组第每一项必须是promise');
return new Promise((resolve, reject) => {
try {
promiseArr.forEach((item, index) => {
if (!status) {
item.then(res => {
resolve(res);
status = true;
}, error => {
reject(error);
})
};
});
} catch (error) {
reject(error);
}
})
};
let raceArr = [
new Promise((resolve, reject) => {
setTimeout(_ => {
resolve('race-----3s');
}, 3000);
}),
new Promise((resolve, reject) => {
setTimeout(_ => {
resolve('race-----2s');
}, 2000);
}),
new Promise((resolve, reject) => {
setTimeout(_ => {
resolve('race-----5s');
}, 5000);
}),
];