VUE中使用promise. all发送多个请求

vue中使用promise.all发送多个请求
1.建立两个promise,在promise中使用axios
2.调用Promise.all([p1,p2]).then(res=>{}).catch(err=>{})方法

Promse.all在处理多个异步处理时很是有用，好比说一个页面上须要等两个或多个ajax的数据回来之后才正常显示，在此以前只显示loading图标。

代码模拟：

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒来`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
  console.log(error)
})

 

Promise.all 生成并返回一个新的 Promise 对象，因此它能够使用 Promise 实例的全部方法。参数传递promise数组中全部的 Promise 对象都变为resolve的时候，该方法才会返回， 新建立的 Promise 则会使用这些 promise 的值。

须要特别注意的是，Promise.all得到的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即使p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程当中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问能够解决这个问题。