在我們傳統的Javascript開發函數編寫中，我們習慣了回調函數的處理，不過隨著回調函數的增多，以及異步處理的復雜性等原因，代碼越來越難讀，因此誕生了使用Promise來優化JS函數處理的需求，引入Promise確實能夠很好的解決異步回調函數的可讀性等問題，同時也使得我們調用的時候代碼簡潔一些，本文介紹如何在小程序的JS代碼里面使用Promise來封裝一些函數的做法。

1、小程序傳統的回調處理

例如我們生成一個小程序，里面的app.js里面就自動帶有一個getUserInfo的函數，這個是使用傳統模式的回調函數。

//app.jsApp({ onLaunch: function () { //調用API從本地緩存中獲取數據 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) },  getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){  typeof cb == "function" && cb(this.globalData.userInfo) }else{  //調用登錄接口  wx.login({  success: function () {   wx.getUserInfo({   success: function (res) {    that.globalData.userInfo = res.userInfo    typeof cb == "function" && cb(that.globalData.userInfo)   }   })  }  }) } }, globalData:{ userInfo: null, openid: null }})

這種是通過 傳入一個cb的回調函數進行處理，使用的時候為了安全性，還需要進一步判斷其類型是否為函數：typeof cb == "function"，這種處理還是相對比較易懂。

但是，如果我們一段代碼中，異步操作太多，又要保證這些異步操作是有順序的執行，那我們的代碼就看起來非常糟糕，就像這樣的極端情況：

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

如果我們改用Promise來處理，那么進行一層簡單的包裝即可。

function asyncFunc1(){ return new Promise(function (resolve, reject) { //... })}

2、Promise的使用介紹

Promise的使用相對比較簡單，我們入門可以參考下相關介紹：阮一峰 promise入門，如果我們在JS函數里面引入它的話，那么需要包含對應的javascript組件

我們可以在Github上下載對應的組件JS，引入小程序項目即可：es6-promise

我們為了方便，在項目中創建一個輔助類utils.js，然后在其中引入Promise的腳本，如下所示。

const Promise = require('./Promise')

然后在APP.js里面，我們修改原來的getUserInfo函數如下 

//app.jsconst utils = require('./utils/util.js')App({ onLaunch: function() {  //調用API從本地緩存中獲取數據  var logs = wx.getStorageSync('logs') || []  logs.unshift(Date.now())  wx.setStorageSync('logs', logs) }, getUserInfo() {  return new utils.Promise((resolve, reject) => {   if (this.globalData.userInfo) {    resolve(this.globalData.userInfo)   }   return utils.getUserInfo().then(res => {    resolve(this.globalData.userInfo = res.userInfo)   })  }) }, //獲取系統信息 getSystemInfo() {  return new utils.Promise((resolve, reject) => {   var that = this   if (that.globalData.systemInfo) {    resolve(that.globalData.systemInfo)   } else {    wx.getSystemInfo({     success: function(res) {      resolve(that.globalData.systemInfo = res);     }    })   }  }) }, //全局對象 globalData: {  userInfo: null,  systemInfo: null }, utils})