微信小程序開(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詳細(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)
})
}
}
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 })
);
};
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
}
-
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
