微信小程序中使用Promise进行异步流程处理的实例详解

微信小程序中使用Promise进行异步流程处理的实例详解

我们知道，JavaScript是单进程执行的，同步操作会对程序的执行进行阻塞处理。比如在浏览器页面程序中，如果一段同步的代码需要执行很长时间（比如一个很大的循环操作），则页面会产生卡死的现象。

所以，在JavaScript中，提供了一些异步特性，为程序提供了性能和体验上的益处，比如可以将代码放到setTimeout()中执行；或者在网页中，我们使用Ajax的方式向服务器端做异步数据请求。这些异步的代码不会阻塞当前的界面主进程，界面还是可以灵活的进行操作，等到异步代码执行完成，再做相应的处理。

一段典型的异步代码类似这样：

function asyncFunc(callback) { setTimeout(function () {  //在这里写你的逻辑代码  //...  //逻辑代码结束，执行一个回调函数  callback(); }, 5000);}

或者：

function getAccountInfo(callback, errorCallback) { wx.request({  url: '/accounts/12345',  success: function (res) {   //...   callback(data);  },  fail: function (res) {   //...   errorCallback(data);  } });}

然后我们这样调用：

asyncFunc(function () { console.log("asyncFunc() run complete");});getAccountInfo(function (data) { console.log("get account info successfully:", data);}, function () { console.error("get account info failed");});

这是一种使用了回调函数来控制代码执行流程的方式。这样看起来没问题，也挺容易理解。

但是，如果我们一段代码中，异步操作太多，又要保证这些异步操作是有顺序的执行，那我们的代码就看起来非常糟糕，就像这样：

asyncFunc1(function(){ //... asyncFunc2(function(){  //...  asyncFunc3(function(){   //...   asyncFunc4(function(){    //...    asyncFunc5(function(){      //...    });   });  }); });});

这样的代码可读性和可维护性可想而知了。还有，回调函数真正的问题在于：

它剥夺了我们使用 return 和 throw 这些关键字的能力。

那有什么办法来改善这个问题呢？答案是肯定的，Promise这种概念的产生，很好地解决了这一切。关于什么是Promise，一搜一大把介绍，我这里就不复制粘贴了，我主要是讲一下我们怎么用它来解决我们的问题。

我们来看一下，上面的例子如果使用Promise，它会是什么样子?我们先将这些函数变成Promise的方式：

function asyncFunc1(){ return new Promise(function (resolve, reject) {  //... })} // asyncFunc2,3,4,5也实现成跟asyncFunc1一样的方式...

然后看一下他们是怎么样被调用的：

asyncFunc1() .then(asyncFunc2) .then(asyncFunc3) .then(asyncFunc4) .then(asyncFunc5);