欢迎光临,了解微信小程序开发,就上易用通!

Promise对象的链式调用(解决异步回调嵌套)

发布:2018-01-25 10:57浏览: 来源:网络 作者:tianshu

Promise对象是解决异步回调嵌套的一种方案,现在封装Promise的库很多、像q,bluebrid等等。Promise对象下调用.then方法就可以把异步排个顺序,那么只要返回Promise对象、.then就可以继续下去
首先我们定义三个异步方法

  1. var test ={
  2.         func1:function(){
  3.                 var data = new Promise(function(resolve){
  4.                         setTimeout(function(){
  5.                                 resolve("ajax结果111")
  6.                         },200)
  7.                 })
  8.                 return data;
  9.         },
  10.         func2:function(){
  11.                 var data = new Promise(function(resolve){
  12.                         setTimeout(function(){
  13.                                 resolve("ajax结果222")
  14.                         },100)
  15.                 })
  16.                 return data;
  17.         },
  18.         func3:function(){
  19.                 var data = new Promise(function(resolve){
  20.                         setTimeout(function(){
  21.                                 resolve("ajax结果333")
  22.                         },500)
  23.                 })
  24.                 return data;
  25.         }
  26. }


假设三个方法分别三个ajax
然后

  1. test.func1().then(function(value){
  2.         console.log(value)
  3.         //do something...
  4. })


那如果想要三个ajax顺序请求、并依赖上一个ajax的结果,该怎么写呢?
可能你会这样做:

  1. test.func1().then(function(value){
  2.         console.log(value)
  3.         test.func2().then(function(value){
  4.                 console.log(value)
  5.                 test.func3().then(function(value){
  6.                         console.log(value)
  7.                         //do something...
  8.                 })
  9.         })
  10. })
  11.  


但是这样写跟ajax嵌套一样代码越多越看不清楚...改起来也麻烦
所以要链式调用、并让三个方法顺序执行

  1. test.func1().then(function(value){
  2.         console.log(value)
  3.         //do something...
  4.         return test.func2();
  5. }).then(function(value){
  6.         console.log(value)
  7.         return test.func3();
  8. }).then(function(value){
  9.         console.log(value)
  10. })        


使用return链式调用、这样代码就清晰明了
希望可以帮助到大家
 




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。