我们平时在项目中可能会请求多个异步结果最后整合到一起的需求,也就是说在一个页面中获取一组数据,需要调用不同的接口最后将他们拼接到一起,在这个数组中可能初始获取了一组数据,但是数据有不全的地方需要我们调用其他的接口,将缺失的部分再拼上。
使用promise.all()执行多个相互不关联的ajax请求,因为是异步调用,我们需要统一的获取这些ajax请求是否都是成功的。
首先,获取数据的函数返回一个promise对象,promise构造函数定义一个匿名函数,这个匿名函数中传两个参数,一个是resolve:在ajax请求成功后,调用resolve函数将想要在promise.all()得到得数据作为参数; 另一个是reject:ajax请求失败是调用。
//第一个ajax函数
getAjax1(){
return new Promise( (resolve,reject) => {
this.$axios(url).then( (response) => {
....数据操作返回需要得到的data
//ajax请求成功后调用resolve函数将data返回
resolve(data);
})
.catch(error){
//失败调用reject函数
reject(error);
}
})
}
//第二个ajax函数
getAjax2(){
return new Promise( (resolve,reject) => {
this.$axios(url).then( (response) => {
....数据操作返回需要得到的data
//ajax请求成功后调用resolve函数将data返回
resolve(data);
})
.catch(error){
//失败调用reject函数
reject(error);
}
})
}
其次,使用promise.all()函数时,将获取的promise.resolve返回的数据存储,p1,p2获取的是promise.resolve传入的结果,all函数的参数数组传递resolve的数据,最后当promise.all函数成功后then函数中的参数就是我们想要的数据数组。
//Promise.all()函数使用
testPromiseAll(){
let p1 = this.getAjax1(),
p2 = this.getAjax2();
Promise.all([p1,p2]).then( (dataArray) => {
console.log(dataArray);
})
}