詳解在微信小程序的JS腳本中使用Promise來優(yōu)化函數(shù)處理
在我們傳統(tǒng)的Javascript開發(fā)函數(shù)編寫中，我們習(xí)慣了回調(diào)函數(shù)的處理，不過隨著回調(diào)函數(shù)的增多，以及異步處理的復(fù)雜性等原因，代碼越來越難讀，因此誕生了使用Promise來優(yōu)化JS函數(shù)處理的需求，引入Promise確實能夠很好的解決異步回調(diào)函數(shù)的可讀性等問題，同時也使得我們調(diào)用的時候代碼簡潔一些，本文介紹如何在小程序的JS代碼里面使用Promise來封裝一些函數(shù)的做法。
1、小程序傳統(tǒng)的回調(diào)處理
例如我們生成一個小程序，里面的app.js里面就自動帶有一個getUserInfo的函數(shù)，這個是使用傳統(tǒng)模式的回調(diào)函數(shù)。
//app.js
App({
onLaunch: function () {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
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{
//調(diào)用登錄接口
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的回調(diào)函數(shù)進行處理，使用的時候為了安全性，還需要進一步判斷其類型是否為函數(shù)：typeof cb == "function"，這種處理還是相對比較易懂。
但是，如果我們一段代碼中，異步操作太多，又要保證這些異步操作是有順序的執(zhí)行，那我們的代碼就看起來非常糟糕，就像這樣的極端情況：
asyncFunc1(function(){
//...
asyncFunc2(function(){
//...
asyncFunc3(function(){
//...
asyncFunc4(function(){
//...
asyncFunc5(function(){
//...
});
});
});
});
});
如果我們改用Promise來處理，那么進行一層簡單的包裝即可。
function asyncFunc1(){
return new Promise(function (resolve, reject) {
//...
})
}
2、Promise的使用介紹
Promise的使用相對比較簡單，我們?nèi)腴T可以參考下相關(guān)介紹：阮一峰 promise入門，如果我們在JS函數(shù)里面引入它的話，那么需要包含對應(yīng)的javascript組件
我們可以在Github上下載對應(yīng)的組件JS，引入小程序項目即可：es6-promise
我們?yōu)榱朔奖?，在項目中?chuàng)建一個輔助類utils.js，然后在其中引入Promise的腳本，如下所示。
const Promise = require('./Promise')
然后在APP.js里面，我們修改原來的getUserInfo函數(shù)如下
//app.js
const utils = require('./utils/util.js')
App({
onLaunch: function() {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
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)
})
})
},
//獲取系統(tǒng)信息
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
})
我們看到，所有原先的函數(shù)，我們?nèi)绻枰隤romise處理的話，增加一層的函數(shù)體即可。
return new utils.Promise((resolve, reject) => {
// 原來的函數(shù)體代碼
});
這樣我們調(diào)用的時候，使用then函數(shù)進行處理即可，類似下面的代碼。
getUserInfo().then(user => this.setData({userInfo:user})).catch(console.log);
引入這個Promise后，我們?yōu)榱诉M一步實現(xiàn)代碼的重用，可以把一些常見的函數(shù)放到utils.js來，這樣可以實現(xiàn)代碼的重用。
//用戶登錄
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')
}
})
})
}
然后發(fā)布對應(yīng)的接口，以供其他模塊使用即可。
//發(fā)布的接口
module.exports = {
Promise,makeArray,getUserInfo,
get:requstGet,post:requstPost,requst,decodeHtml,
formatTime,getDateDiff
}
封裝好這些公用方法后，我們在頁面里面進行調(diào)用即可，調(diào)用的代碼如下所示（演示代碼從地址里面獲取數(shù)據(jù)，并綁定到界面上）
//使用Comprise的封裝函數(shù)展現(xiàn)
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);
});
而如果我們使用原來的函數(shù)，那么實現(xiàn)代碼如下所示。
// 使用標準的wx.request函數(shù)實現(xiàn)展現(xiàn)
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);
}
})
如果對于復(fù)雜流程的函數(shù)處理，使用Promise來處理，會顯得更加簡潔易讀。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS提交form表單的方法,結(jié)合實例形式簡單分析了頁面加載時提交表單及通過鏈接提交表單的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JavaScript清空數(shù)組的四種方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
本文章來給各位同學(xué)收集一些在WEB前臺開發(fā)中常用的一些控制表單操作函數(shù)，有需要的朋友可以參考一下2013-08-08
javascript頁面上使用動態(tài)時間具體實現(xiàn)
這篇文章主要介紹了javascript在頁面上使用動態(tài)時間實現(xiàn)示例,需要的朋友可以參考下2014-03-03
今天在項目碰到一個問題，之前在項目首頁實現(xiàn)單列表的顯示和隱藏，通過wx:if判斷就可實現(xiàn)，現(xiàn)在要實現(xiàn)多列表的單項顯示和隱藏功能應(yīng)該如何實現(xiàn)呢？下面小編給大家?guī)砹宋⑿判〕绦蛑嗔斜淼娘@示和隱藏功能，感興趣的朋友一起看看吧2018-08-08
對于一些電商平臺來說，當(dāng)商品被轉(zhuǎn)發(fā)后會很影響客戶查看其它產(chǎn)品和首頁，這時候就需要使用自定義導(dǎo)航欄自己寫一個“膠囊按鈕”。這篇文章主要介紹了詳見微信小程序膠囊按鈕返回|首頁自定義導(dǎo)航欄,需要的朋友可以參考下2019-06-06
本文主要介紹了js實現(xiàn)圖片左右滾動效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
奇或偶數(shù)行高亮顯示及鼠標莫過高亮顯示,一個經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒有一個封裝成類直接用的.想象自己當(dāng)初谷歌這個類時,還真沒少折騰時間.2010-07-07
在判斷函數(shù)類型時，我們通常使用typeof方法，一般情況下，它會得到我們所預(yù)想的效果。2009-09-09
這篇文章主要為大家詳細介紹了JS、CSS和HTML實現(xiàn)注冊頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07