一文详解如何有效的处理Promise并发
作者：liangyue
前言
如上图所示的代码，相信大家在平时的开发中肯定用到不少，我们可以进行优化，使得只用短短一半的时间就可以完成。 在上面的函数中，我们等待用户信息请求完成后再请求详情信息。但这两个函数之间并没有任何关联，所以我们可以同时触发两个请求，并同时等待完成。那么，我们有多少种方式来实现呢？你真的可以处理好Promise的并发么？接下来，我们进入正题。
Promise.all
如何实现
Promise.all 大家应该是比较熟悉的，Promise.all方法接收一个promise的iterable类型，如果所有传入的promise都变成完成状态，Promise.all返回的Promise异步的变为完成。如果传入的promise中有一个失败(rejected),Promise.all将失败的结果给失败状态的回调函数，而不管其他promise是否完成。 我们可以如下实现刚才的代码
async function init() {
const [user, info] = await Promise.all([
getUser(),
getInfo()
])
console.log('init', user, info)
}
现在这种方式，如果我们之前每个请求都需要1秒，一共需要2秒，那么现在两个同时执行只需要1秒就完成了！但是这样也有一个问题：我们并没有考虑报错问题。你可能会认为，这个很简单，把代码放在一个try...cahtch中不就可以了，就像这样：
async function init() {
try {
const [user, info] = await Promise.all([
getUser(),
getInfo()
])
console.log('init ==== ', user, info)
} catch(err) {
console.log('err', err);
}
}
但是，这样的话会有一个问题，就像这样：
function getUser() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('user reject')
}, 500);
})
}
function getInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('info reject')
}, 1000);
})
}
// 输出 err user reject
由于getUser优先完成并出现错误，此时触发了catch，而当getInfo再次完成并出现错误时，将不会触发catch。因为catch代码已经运行，函数已经完成。 那么，要怎么做呢？接下来，我们就讲讲应该如何处理报错问题。
如何处理报错
解决方式是，给Promise.all中的每个函数加上catch，如下：
function handle(err) {
console.log('err', err)
}
function onReject(err) {
handle(err);
return new Error(err);
}
async function init() {
const [user, info] = await Promise.all([
getUser().catch(onReject),
getInfo().catch(onReject)
])
console.log('init', user instanceof Error, info instanceof Error) // init true true
}
这样，我们在onReject函数中处理错误，并返回这个错误。所以现在我们生成的user和info要么是Error要么是我们期望的效果，而Error我们可以用instanceof检查它。
Promise.allSettled
解决并发我们还可以使用 Promise.allSettled ，我们会得到一个包含每个Promise结果的值或错误信息。
如何实现
接下来，我们来使用一下，代码如下：
async function init() {
const [userStatus, infoStatus] = await Promise.allSettled([
getUser(),
getInfo()
])
console.log('info', userStatus, infoStatus)
}
现在，我们可以得到这样的数据：
结果对象有3个属性：
- status:
fulfilled或rejected - value: 仅在
status为fulfilled时出现，为Promise为resolve返回的值 - reason: 仅在
status为rejected时出现，为Promise被reject时返回的值
因此，我们可以读取到每个Promise的状态，并单独处理每个错误而不会遗漏任何的信息。
最后两个技巧
Promise.race
Promise.race方法可接受一个可迭代的promise返回一个promise，一旦迭代器中某个promise解决或拒绝，返回的promise就会resolve或reject。
我们可以这样实现一个简单的超时功能，代码如下：
function getUser() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('user resolve')
}, 5100);
})
}
async function init() {
// Race to see which Promise completes first
const racePromise = Promise.race([
getUser(),
new Promise((resolve, reject) =>
// Time out after 5 seconds
setTimeout(() => reject(new Error('Timeout')), 5000)
)
])
try {
const result = await racePromise
console.log('result', result)
} catch (err) {
console.log('err', err)
// Timed out!
}
}
注意，通常情况下，如果有超时，那么你需要尽量的取消未完成的待处理任务。
另外，最好还是处理所有promise的reject：
const racePromise = Promise.race([
getUser().catch(onReject),
// xxx
])
Promise.any
Promise.any 等待任何一个promise成功则为成功，只有全部的promise都被reject，才会返回reject。通常我们可以使用Promise.any来实现，当一个promise先完成后，取消其他的promise，不过要注意的是，我们并不总是同时要处理多个数据，只是因为我们可以做到，所以要谨慎的使用它。
通常，我们不想出现未被处理的reject，所以，我们应该这样写：
const anyPromise = Promise.any([
getUser().catch(onReject),
getInfo().catch(onReject)
])
总结
前面我们已经介绍了在使用promise处理并发问题时，应该如何的处理promise的reject。但是也需要注意：过度的并发会导致网络抖动、磁盘抖动或其他问题，虽然可以，但并不是一定要这样做，有时使用async await也可以使代码更容易理解和维护，所以，在使用之前我们更需要考虑是否需要。
以上就是一文详解如何有效的处理Promise并发的详细内容，更多关于有效处理Promise并发的资料请关注脚本之家其它相关文章！