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

1、小程式傳統的回撥處理

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

//app.js
App({
  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.js
const 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
})

我們看到，所有原先的函式，我們如果需要引入Promise處理的話，增加一層的函式體即可。

return new utils.Promise((resolve, reject) => {
     
     // 原來的函式體程式碼  

});

這樣我們呼叫的時候，使用then函式進行處理即可，類似下面的程式碼。

getUserInfo().then(user => this.setData({userInfo:user})).catch(console.log);

引入這個Promise後，我們為了進一步實現程式碼的重用，可以把一些常見的函式放到utils.js來，這樣可以實現程式碼的重用。

//使用者登入
function login(){
  return new Promise((resolve,reject) => wx.login({
    success:resolve,
    fail:reject
  }))
}

//獲取使用者資訊
function getUserInfo(){
  return login().then(res => new Promise((resolve,reject) => 
    wx.getUserInfo({
      success:resolve,
      fail:reject
    })
  ))
}

function requstGet(url,data){
  return requst(url,'GET',data)
}

function requstPost(url,data){
  return requst(url,'POST',data)
}

//封裝Request請求方法
function requst(url,method,data = {}){
  wx.showNavigationBarLoading()
  data.method = method
  return new Promise((resove,reject) => {
    wx.request({
      url: url,
      data: data,
      header: {},
      method: method.toUpperCase(), // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      success: function(res){
        wx.hideNavigationBarLoading()
        resove(res.data)
      },
      fail: function(msg) {
        console.log('reqest error',msg)
        wx.hideNavigationBarLoading()
        reject('fail')
      }
    })
  })
}

然後釋出對應的介面，以供其他模組使用即可。

//釋出的介面
module.exports = {
  Promise,makeArray,getUserInfo,
  get:requstGet,post:requstPost,requst,decodeHtml,

  formatTime,getDateDiff
}

封裝好這些公用方法後，我們在頁面裡面進行呼叫即可，呼叫的程式碼如下所示（演示程式碼從地址裡面獲取資料，並繫結到介面上）

//使用Comprise的封裝函式展現
      var url ='http://localhost:27206/api/Framework/Information/FindByCode';
      var companyurl = "http://www.iqidi.com";
      var json = {code: 'company'};
      app.utils.get(url, json).then(function(res) { 
        var data = { url: companyurl, image: res.Picture, content: res.Content };
        that.setData({
          item : data
        });
        WxParse.wxParse('content', 'html', data.content, that, 25);
      });

而如果我們使用原來的函式，那麼實現程式碼如下所示。

// 使用標準的wx.request函式實現展現
      var url ='http://localhost:27206/api/Framework/Information/FindByCode';
      var companyurl = "http://www.iqidi.com";
      var json = {code: 'company'};
      wx.request({
         url: url,
         data: json,
         success: function(res) {
            console.log(res);
            var data = { url: companyurl, image: res.data.Picture, content: res.data.Content };
            that.setData({
              item : data
            });
            WxParse.wxParse('content', 'html', data.content, that, 25);
         }
       })

如果對於複雜流程的函式處理，使用Promise來處理，會顯得更加簡潔易讀。

轉: https://www.cnblogs.com/wuhuacong/p/7442711.html