在微信小程式的JS指令碼中使用Promise來優化函式處理
在我們傳統的Javascript開發函式編寫中,我們習慣了回撥函式的處理,不過隨著回撥函式的增多,以及非同步處理的複雜性等原因,程式碼越來越難讀,因此誕生了使用Promise來優化JS函式處理的需求,引入Promise確實能夠很好的解決非同步回撥函式的可讀性等問題,同時也使得我們呼叫的時候程式碼簡潔一些,本文介紹如何在小程式的JS程式碼裡面使用Promise來封裝一些函式的做法。
1、小程式傳統的回撥處理
例如我們生成一個小程式,裡面的app.js裡面就自動帶有一個getUserInfo的函式,這個是使用傳統模式的回撥函式。
//app.js App({ onLaunch: function() { //呼叫API從本地快取中獲取資料 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{ //呼叫登入介面 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的回撥函式進行處理,使用的時候為了安全性,還需要進一步判斷其型別是否為函式:typeof cb == "function",這種處理還是相對比較易懂。
但是,如果我們一段程式碼中,非同步操作太多,又要保證這些非同步操作是有順序的執行,那我們的程式碼就看起來非常糟糕,就像這樣的極端情況:
asyncFunc1(function(){ //... asyncFunc2(function(){ //... asyncFunc3(function(){ //... asyncFunc4(function(){ //... asyncFunc5(function(){ //... }); }); }); }); });
如果我們改用Promise來處理,那麼進行一層簡單的包裝即可。
function asyncFunc1(){ return new Promise(function (resolve, reject) { //... }) }
2、Promise的使用介紹
Promise的使用相對比較簡單,我們入門可以參考下相關介紹:阮一峰 promise入門,如果我們在JS函式裡面引入它的話,那麼需要包含對應的javascript元件
我們可以在Github上下載對應的元件JS,引入小程式專案即可:es6-promise
我們為了方便,在專案中建立一個輔助類utils.js,然後在其中引入Promise的指令碼,如下所示。
const Promise = require('./Promise')
然後在APP.js裡面,我們修改原來的getUserInfo函式如下
//app.js const utils = require('./utils/util.js') App({ onLaunch: function() { //呼叫API從本地快取中獲取資料 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) }) }) }, //獲取系統資訊 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 })
我們看到,所有原先的函式,我們如果需要引入Promise處理的話,增加一層的函式體即可。
return new utils.Promise((resolve, reject) => { // 原來的函式體程式碼 });
這樣我們呼叫的時候,使用then函式進行處理即可,類似下面的程式碼。
getUserInfo().then(user => this.setData({userInfo:user})).catch(console.log);
引入這個Promise後,我們為了進一步實現程式碼的重用,可以把一些常見的函式放到utils.js來,這樣可以實現程式碼的重用。
//使用者登入 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') } }) }) }
然後釋出對應的介面,以供其他模組使用即可。
//釋出的介面 module.exports = { Promise,makeArray,getUserInfo, get:requstGet,post:requstPost,requst,decodeHtml, formatTime,getDateDiff }
封裝好這些公用方法後,我們在頁面裡面進行呼叫即可,呼叫的程式碼如下所示(演示程式碼從地址裡面獲取資料,並繫結到介面上)
//使用Comprise的封裝函式展現 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); });
而如果我們使用原來的函式,那麼實現程式碼如下所示。
// 使用標準的wx.request函式實現展現 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); } })
如果對於複雜流程的函式處理,使用Promise來處理,會顯得更加簡潔易讀。
轉: https://www.cnblogs.com/wuhuacong/p/7442711.html