多个Promise请求，存在失败请求的情况下，获取成功请求结果

背景

在日常开发中，有时候会用到Promise.all并行发起多个请求，但是只要出现一个失败的请求，就会走入catch，导致多个请求中成功的部分也被迫失败，这可能也是设计的初衷，但是

目标

并行发送多个请求，其中失败的请求，不影响获取成功请求的结果

处理方案

1、Promise.allSettled

示例：

// 成功的请求
function ajaxSuccess () {
  return Promise.resolve([1, 2, 3])
}
// 失败的请求
function ajaxFail () {
  return Promise.reject('我失败了')
}

const promiseArr = [ajaxSuccess(), ajaxFail(), ajaxSuccess()]

Promise.allSettled(promiseArr).then(res => {
  console.log(res, 'promise.allSettled结果')
}).catch(err => {
  console.log(err)
})

运行结果：

总结:

多个promise结果，按照顺序存入数组，根据status判断接口是否成功，做出相应的逻辑处理

2、特殊处理Promise.all

示例代码：

// 成功的请求
function ajaxSuccess () {
  return Promise.resolve([1, 2, 3])
}
// 失败的请求
function ajaxFail () {
  return Promise.reject('我失败了')
}

// -------------------------------------------模拟前端API调用----------------------------------------------------

// 成功调用
const promise1 = new Promise((resolve, reject) => {
  return ajaxSuccess().then(res => {
    resolve(res)
  }).catch(err => {
    resolve(null)
    reject(err)
  })
})
const promise2 = new Promise((resolve, reject) => {
  return ajaxSuccess().then(res => {
    resolve(res)
  }).catch(err => {
    resolve(null)
  })
})
// 失败调用
const promiseFail = new Promise((resolve, reject) => {
  return ajaxFail().then(res => {
    resolve(res)
  }).catch(err => {
    resolve(null)
  })
})


const promiseArr = [promise1, promiseFail, promise2]

Promise.all(promiseArr).then(res => {
  console.log(res, 'promise.all结果')
}).catch(err => {
  console.log(err)
})

运行结果：

总结：

需要对ajax请求外层包一层Promise，针对catch内容，使用resovle对外抛出一个特殊的值，比如null，是类似allsettled的一种实现方式；

多个promise结果，按照顺序存入数组，根据自定义的内容判断接口是否成功，做出相应的逻辑处理