小程序模板網(wǎng)

dzp:微信小程序 es6 promise

發(fā)布時(shí)間:2017-12-05 08:59 所屬欄目:小程序開(kāi)發(fā)教程

微信小程序開(kāi)發(fā)兩個(gè)月了.大家的項(xiàng)目都在不斷迭代.已經(jīng)不是小程序.這時(shí)候就會(huì)遇到多層回調(diào)嵌套的問(wèn)題.有些目不忍視了.迫不得已引入es6-promise.在微信小程序內(nèi)測(cè)的時(shí)候promise不需要手動(dòng)引入,后來(lái)被微信移除了.看看效果. 
promise 
promise詳細(xì)的介紹我就不說(shuō)了.有很多大神寫(xiě)過(guò). 
阮一峰 promise入門(mén)

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

1.網(wǎng)絡(luò)請(qǐng)求 wxRequest.js 
這里只寫(xiě)了get和post. 
我經(jīng)常會(huì)在網(wǎng)絡(luò)請(qǐng)求的時(shí)候用微信原生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)
    })
  }
}
//無(wú)論promise對(duì)象最后狀態(tài)如何都會(huì)執(zhí)行
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 })
  );
};
/**
 * 微信請(qǐng)求get方法
 * url
 * data 以對(duì)象的格式傳入
 */
function getRequest(url, data) {
  var getRequest = wxPromisify(wx.request)
  return getRequest({
    url: url,
    method: 'GET',
    data: data,
    header: {
      'Content-Type': 'application/json'
    }
  })
}

/**
 * 微信請(qǐng)求post方法封裝
 * url
 * data 以對(duì)象的格式傳入
 */
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.微信其他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)
    })
  }
}
//無(wú)論promise對(duì)象最后狀態(tài)如何都會(huì)執(zhí)行
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 })
  );
};
/**
 * 微信用戶登錄,獲取code
 */
function wxLogin() {
  return wxPromisify(wx.login)
}
/**
 * 獲取微信用戶信息
 * 注意:須在登錄之后調(diào)用
 */
function wxGetUserInfo() {
  return wxPromisify(wx.getUserInfo)
}
/**
 * 獲取系統(tǒng)信息
 */
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.用法  promise應(yīng)用場(chǎng)景很多,下面是promise最基本的用法,在then()中returnpromise對(duì)象.  這樣有效解決了回調(diào)嵌套的問(wèn)題.讓代碼看起來(lái)更優(yōu)雅.可讀性更高.

var util = require('../../utils/util')
var wxApi = require('../../utils/wxApi')
var wxRequest = require('../../utils/wxRequest')
import config from '../../utils/config'
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
  data: {
    userInfo: {}
  },
  onLoad: function () {
    var that = this;
    wx.showToast({
      title: '加載中',
      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.獲取綁定手機(jī)號(hào)碼
        return wxRequest.postRequest(url, data)
      }).
      then(res => {
        console.log('3.成功了')
        console.log(res)
        //4.獲取系統(tǒng)信息
        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.成功了')
        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

 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/18033.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢