在我們傳統的Javascript開發函數編寫中，我們習慣了回調函數的處理，不過隨著回調函數的增多，以及異步處理的復雜性等原因，代碼越來越難讀，因此誕生了使用Promise來優化JS函數處理的需求，引入Promise確實能夠很好的解決異步回調函數的可讀性等問題，同時也使得我們調用的時候代碼簡潔一些，本文介紹如何在小程序的JS代碼里面使用Promise來封裝一些函數的做法。
1、小程序傳統的回調處理
例如我們生成一個小程序，里面的app.js里面就自動帶有一個getUserInfo的函數，這個是使用傳統模式的回調函數。
//app.jsApp({ 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.jsconst 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來處理，會顯得更加簡潔易讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
