一、Promise.all

我们平时在项目中可能会请求多个异步结果最后整合到一起的需求,也就是说在一个页面中获取一组数据,需要调用不同的接口最后将他们拼接到一起,在这个数组中可能初始获取了一组数据,但是数据有不全的地方需要我们调用其他的接口,将缺失的部分再拼接到一起。

  • 获取互相不关联的ajax返回数据;
  • 使用promise.all()执行多个相互不关联的ajax请求,因为是异步调用,因此需要统一的获取这些ajax请求是否都是成功的;
  • 使用promise.all()函数时,将获取的promise.resolve返回的数据存储;

1. 互相不关联的ajax请求:

ajax 异步调用 ,使用promise.all()确保两个数值全部获取到后再执行下面的操作。

//第一个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);
        }
    })
}

注意:这里两个ajax数据请求互不干扰。

2. 统一获取多个异步请求返回的数据:

//Promise.all()函数使用
testPromiseAll(){
    let p1 = this.getAjax1(),
        p2 = this.getAjax2();
    Promise.all([p1,p2]).then( (dataArray) => {
        console.log(dataArray);
    })
}

p1,p2获取的是promise.resolve传入的结果,all函数的参数数组传递resolve的数据,最后当promise.all函数成功后then函数中的参数就是我们想要的数据数组。

二、Promise.then

获取有先后关系的ajax数据结果
promise.then()后再调用promise.then()…
每一个promise对象都会返回自身。

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐