vue中promise和axios 同步爬坑小记

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zjscy666/article/details/76390350

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异步请求完毕,才执行!


猜你喜欢

转载自blog.csdn.net/zjscy666/article/details/76390350