微信小程序開發兩個月了.大家的項目都在不斷迭代.已經不是小程序.這時候就會遇到多層回調嵌套的問題.有些目不忍視了.迫不得已引入es6-promise.在微信小程序內測的時候promise不需要手動引入,后來被微信移除了.看看效果. 
 
promise詳細的介紹我就不說了.有很多大神寫過. 
阮(ruan)一峰 promise入門

看看目錄,引入es6-promise就可以用了. 

1.網絡請求 wxRequest.js 
這里只寫了get和post. 
我經常會在網絡(luo)請求的時(shi)候用微信原(yuan)生showToast(),所以最后加了finally,方便hideToast()

var Promise = require('../plugins/es6-promise.js')

function wxPromisify(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function (res) {
        //成功
        resolve(res)
      }
      obj.fail = function (res) {
        //失敗

        reject(res)
      }
      fn(obj)
    })
  }
}
//無論promise對象最后狀態如何都會執行
Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};
/**
 * 微信請求get方法
 * url
 * data 以對象的格式傳入
 */
function getRequest(url, data) {
  var getRequest = wxPromisify(wx.request)
  return getRequest({
    url: url,
    method: 'GET',
    data: data,
    header: {
      'Content-Type': 'application/json'
    }
  })
}

/**
 * 微信請求post方法封裝
 * url
 * data 以對象的格式傳入
 */
function postRequest(url, data) {
  var postRequest = wxPromisify(wx.request)
  return postRequest({
    url: url,
    method: 'POST',
    data: data,
    header: {
      "content-type": "application/x-www-form-urlencoded"
    },
  })
}

module.exports = {
  postRequest: postRequest,
  getRequest: getRequest
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63

2.微(wei)信其他API wxApi.js

var Promise = require('../plugins/es6-promise.js')

function wxPromisify(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function (res) {
        //成功
        resolve(res)
      }
      obj.fail = function (res) {
        //失敗
        reject(res)
      }
      fn(obj)
    })
  }
}
//無論promise對象最后狀態(tai)如何都會執行
Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};
/**
 * 微信用戶登錄,獲(huo)取code
 */
function wxLogin() {
  return wxPromisify(wx.login)
}
/**
 * 獲取微(wei)信(xin)用(yong)戶(hu)信(xin)息
 * 注意:須在(zai)登錄之后(hou)調用(yong)
 */
function wxGetUserInfo() {
  return wxPromisify(wx.getUserInfo)
}
/**
 * 獲(huo)取系統信息
 */
function wxGetSystemInfo() {
  return wxPromisify(wx.getSystemInfo)
}


module.exports = {
  wxPromisify: wxPromisify,
  wxLogin: wxLogin,
  wxGetUserInfo: wxGetUserInfo,
  wxGetSystemInfo: wxGetSystemInfo
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53

3.用(yong)法  promise應(ying)用(yong)場(chang)景很多(duo),下面是promise最(zui)基本的用(yong)法,在(zai)then()中returnpromise對象.  這(zhe)樣有效解(jie)決(jue)了回調嵌套的問題(ti).讓(rang)代碼看起來更(geng)優(you)雅(ya).可讀(du)性更(geng)高.

var util = require('../../utils/util')
var wxApi = require('../../utils/wxApi')
var wxRequest = require('../../utils/wxRequest')
import config from '../../utils/config'
//獲取應用實例
var app = getApp()
Page({
  data: {
    userInfo: {}
  },
  onLoad: function () {
    var that = this;
    wx.showToast({
      title: '加載中(zhong)',
      icon: 'loading',
      duration: 10000
    })
    //1.獲取code
    var wxLogin = wxApi.wxLogin()
    wxLogin().then(res => {
      console.log('1.成功了')
      console.log(res.code)
      var url = config.getOpenidUrl;
      var params = {
        appid: "wxed7******2d465",
        secret: "e9c5e4c******09ecc5ebd811",
        js_code: res.code,
        grant_type: "authorization_code"
      }
      //2.獲取openid
      return wxRequest.getRequest(url, params)
    }).
      then(res => {
        console.log('2.成功了')
        console.log(res)
        var url = app.globalData.ip + config.searchDgUrl
        var data = util.json2Form({ phoneNumber: '15971908021' })
        //3.獲取綁定手機號碼
        return wxRequest.postRequest(url, data)
      }).
      then(res => {
        console.log('3.成功了')
        console.log(res)
        //4.獲取系統信息
        var wxGetSystemInfo = wxApi.wxGetSystemInfo()
        return wxGetSystemInfo()
      }).
      then(res => {
        console.log('4.成功了')
        console.log(res)
        //5.獲取用戶信息
        var wxGetUserInfo = wxApi.wxGetUserInfo()
        return wxGetUserInfo()
      }).
      then(res => {
        console.log('5.成功(gong)了')
        console.log(res.userInfo)
        that.setData({
          userInfo: res.userInfo
        })
      })
      .finally(function (res) {
        console.log('finally~')
        wx.hideToast()
      })
  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67