微信小程序開發兩個月了.大家的項目都在不斷迭代.已經不是小程序.這時候就會遇到多層回調嵌套的問題.有些目不忍視了.迫不得已引入es6-promise.在微信小程序內測的時候promise不需要手動引入,后來被微信移除了.看看效果.

promise詳細的介紹我就不說了.有很多大神寫過.

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

目錄

1.網絡請求 wxRequest.js

這里只寫了get和post.

我經常會在網絡請求的時候用微信原生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

}

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)

})

}

}

//無論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 })

);

};

/**

* 微信用戶登錄,獲取code

*/

function wxLogin() {

return wxPromisify(wx.login)

}

/**

* 獲取微信用戶信息

* 注意:須在登錄之后調用

*/

function wxGetUserInfo() {

return wxPromisify(wx.getUserInfo)

}

/**

* 獲取系統信息

*/

function wxGetSystemInfo() {

return wxPromisify(wx.getSystemInfo)

}

module.exports = {

wxPromisify: wxPromisify,

wxLogin: wxLogin,

wxGetUserInfo: wxGetUserInfo,

wxGetSystemInfo: wxGetSystemInfo

}

3.用法

promise應用場景很多,下面是promise最基本的用法,在then()中returnpromise對象.

這樣有效解決了回調嵌套的問題.讓代碼看起來更優雅.可讀性更高.

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: '加載中',

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.成功了')

console.log(res.userInfo)

that.setData({

userInfo: res.userInfo

})

})

.finally(function (res) {

console.log('finally~')

wx.hideToast()

})

}

})

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

總結

以上是生活随笔為你收集整理的then 微信小程序_微信小程序 引入es6 promise的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。