Promise.all 解决多个请求并发执行，并且有错误还能按顺序执行并输出。

要解决这个问题，首先要知道Promise.all是什么？

• Promise.all() 它接收一个promise对象组成的数组作为参数，并返回一个新的promise对象。

• 当数组中所有的对象都resolve时，新对象状态变为fulfilled，所有对象的resolve的value依次添加组成一个新的数组，并以新的数组作为新对象resolve的value。

• 当数组中有一个对象reject时，新对象状态变为rejected，并以当前对象reject的reason作为新对象reject的reason。

我们用setTimeout来模拟请求，数据data = [500, 400, 300, 200, 100]既是每个请求返回的数据也是每个请求所需的时间。

如果是继发请求(一个请求结束后再请求后一个)，那么应该是按顺序打印，理论上所有请求的总时间等于每个请求所花时间之和，约等于1500ms；如果是并发请求(假设请求数不会太多，不超过限制)，顺序是按时间从小到大打印，理论上所有请求的总时间等于最长的那个时间，约等于500ms

// 模拟请求
function request(param) {
return new Promise(resolve => {
    setTimeout(() => {
console.log(param)
       resolve()
    }, param)
  })
}
const items = [500, 400, 300, 200, 100]

使用Promise.all可以并发执行，并知道请求结束。

(() => {
Promise.all(items.map(request)).then(res => {
console.log('end')
  })
})()
// 输出：100, 200, 300, 400, 500, end

但是由Promise.all的定义知道，当其中一个出错时，就不会resolve返回值。
模拟一个出错的情况

const items = [500, 400, 300, 200, 100]
function request(param) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (param === 200) {
      // console.log(param, ' failed')
        return reject({ 
          status: 'error',
          data: param
        })
      }
// console.log(param, ' success')
    resolve({
      status: 'success',
      data: param
      })
    }, param)
  })
}

出错时，在使用刚刚那个Promise.all时就会打印

(() => {
Promise.all(items.map(request))
    .then(res => {
console.log(res)
    })
    .catch (err => {
console.log(err)
    })
    .finally(res => {
console.log('end', res)
    })
})()
// 输出 {status: "error", data: 200}, end, undefined

上面的输出可以看出，如果有错误，则不会进入then，而是进入catch，然后进入finally，但是finally不接受参数，只告诉你结束了。如果把上面模拟请求的console.log(...)注释去掉，还会发现finally是在catch结束后就执行了，而200后面的请求还未结束。

接下来我们改造下模拟请求，在请求出错后就catch错误

使用catch捕获错误，然后就能再执行catch后面的正确函数，不使用catch捕获错误，一旦出错，就会停止继续执行正确函数。

const items = [500, 400, 300, 200, 100]

// 请求出错时，catch错误就可以。当出错时，仍能按顺序执行并输出。

function request(param) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (param === 200) {
      // console.log(param, ' failed')
        return reject({ 
          status: 'error',
          data: param
        })
      }
// console.log(param, ' success')
    resolve({
      status: 'success',
      data: param
      })
    }, param)
  }).catch(err => err)
}
// 输出 [{…}, {…}, {…}, {stauts: 'error', data: 200}, {…}], end

这样就解决了我们的问题了。