vue处理多个异步请求_Promise处理多个AJAX异步请求

在一个页面中，有时会遇到多个ajax请求 同时发生，这样不能保证它们的运行顺序，会导致数据出错，

如果有loading动画时，你不能保证哪个请求先完成，来结束动画。

如果两个数据有关联，必须先完成哪个再执行下一个，可以这样来操作。

可以看到上面的代码是一个相对简单的promise结构。

我们先new promise，在参数列表有两个参数，一个resolve一个rejects。通俗的来讲，

resolve相当于ajax中的success，rejects则就是catch。当然，这两个单词可以随便取，也可以在参数列表写上a,b。但是他们代表的意思是一模一样的。在后面我们可以看到一行代码“resolve()”，这就相当于return。

在promise里面的代码块会最先执行，然后resolve()，接着会运行then里面的方法。

在then里面也有参数，()=> {/代码块/}，因为我在上面代码中resolve()的括号中并没有写参数，所以可以看成它返回的是一个空的结果集，所以我在then后面有()来接受，因为是空结果集，所以我用()来接收。

当然你也可以返回想要的结果，打个比方，我把代码改成下面这样

我让resolve返回了一个值，然后在then里面打印出来。

可以看到，res被打印出来就是返回的值1。

Promise.all()  ：

created(){this.init()

},

methods: {

init () {this.$store.dispatch('setLoading', true)

const Ajax= new Promise((resolve, reject) =>{

getAllRecruiter().then(res=>{this.recruiter.option =res.datathis.recruiter.val = res.data[0]

resolve(res)//请求成功后，利用resolve改变promise状态，并且作为返回值传回到promise对象

}).catch((err) =>{

reject(err);//请求失败则利用reject改变状态，终止当前函数流

})

})

const Ajax0= new Promise((resolve, reject) =>{

getAllEmploymentType().then(res=>{this.employmentType.option =res.data

resolve()

}).catch(() =>{

})

})

const Ajax1= new Promise((resolve, reject) =>{

getAllLevel().then(res=>{this.careerLevel.option =res.data

resolve()

}).catch(() =>{

})

})

const Ajax2= new Promise((resolve, reject) =>{

getAllBenefit().then(res=>{this.benefits.option =res.data

resolve()

}).catch(() =>{

})

})

Promise.all([Ajax, Ajax0, Ajax1, Ajax2]).then(()=>{//所有请求都成功后执行函数

this.getOldData()

}).catch(() =>{ 异常处理

this.$store.dispatch('setLoading', false)

})

}

}

-----------------------------

部分文章来自：https://blog.csdn.net/qq_39861508/article/details/78925118