本文探讨了在Vue项目中如何处理两个axios请求的同步问题。通过使用Promise，作者解决了第一个axios请求的结果作为第二个请求参数的情况。在解决过程中，由于Vue中this的作用域问题，导致无法访问全局变量，通过保存this为_this并在Promise内部使用，成功访问到全局变量，实现了同步。此外，还提醒新手注意即使在then中返回新的Promise才能确保同步执行。
es6提供给了我们promise这个对象，我们再也不用像原来那样多个ajax嵌套来实现同步了，在小编看来，promise本质是语法糖，让你能更优雅的解决同步问题！本文来说说小编遇到的问题，和个人见解，具体promise语法请大家自行阅读！
小编遇到的主要问题是有2个异步的axios，第一个axios的值作为第二个axiosd的参数，也就是说第二个axios必须等待第一个axios完成才能执行，小编开始的写法是这样
let prefun = function () {
return new promise(function(resolve,reject){
// axios操作
axios.post(...).then(
(response) => {
` if (返回成功代码) {
resolve(需要传递的值)
}
}
)
})
}
let nextfun = function (prevalue) {
return new promise(function(resolve,reject){
// axios操作
// 参数部分
let param ={
......
}
axios.post(...).then(
(response) => {
` if (返回成功代码) {
resolve(需要传递的值)
}
}
)
})
}
prefun().then((value) =>
{
nextfun(prevalue)
}
).catch(....)
正常情况下，prefun产生的值，通过resolve()传递到then这个回调函数，nextfun 这个函数在prefun执行后，才会执行，这样就完美形成了同步。但是在vue中，
如果vue要调用全局变量，必须加this,于是杯具发生了！问题的关键就出在this上，小编找了好久才找到，西湖的水我的泪啊，小编好伤心！
这个方法nextfun 的这个参数
let param = {
参数1: this.全局变量1
}
promsie里压根就读不到this，也就是说取不到全局变量，这就是作用域问题了，promise里的this和vue中的this指向不同，找到问题后，我们就容易解决了。
我们在promise外面定义let _this =this ，然后在promise里使用_this就好了
let param = {
参数1: _this.全局变量1
}
这样完美解决了同步问题，新手还有个问题要注意，虽然then会返回promise，但是如果需要then中的函数也就同步，需要自己手动写下return new promise....方法
才会和后面的then形成同步关系，如果按照原始的.then.then.then，就是并发，后面几个then并不会等待前面的then中axios异步请求完毕，才执行！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
