在微信小程序的JS腳本中使用Promise來(lái)優(yōu)化函數(shù)處理

　　在我們傳統(tǒng)的Javascript開發(fā)函數(shù)編寫中，我們習(xí)慣了回調(diào)函數(shù)的處理，不過(guò)隨著回調(diào)函數(shù)的增多，以及異步處理的復(fù)雜性等原因，代碼越來(lái)越難讀，因此誕生了使用Promise來(lái)優(yōu)化JS函數(shù)處理的需求，引入Promise確實(shí)能夠很好的解決異步回調(diào)函數(shù)的可讀性等問題，同時(shí)也使得我們調(diào)用的時(shí)候代碼簡(jiǎn)潔一些，本文介紹如何在小程序的JS代碼里面使用Promise來(lái)封裝一些函數(shù)的做法。

　　1、小程序傳統(tǒng)的回調(diào)處理

　　例如我們生成一個(gè)小程序，里面的app.js里面就自動(dòng)帶有一個(gè)getUserInfo的函數(shù)，這個(gè)是使用傳統(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

　　}

　　})

　　這種是通過(guò) 傳入一個(gè)cb的回調(diào)函數(shù)進(jìn)行處理，使用的時(shí)候?yàn)榱税踩?，還需要進(jìn)一步判斷其類型是否為函數(shù)：typeof cb == "function"，這種處理還是相對(duì)比較易懂。

　　但是，如果我們一段代碼中，異步操作太多，又要保證這些異步操作是有順序的執(zhí)行，那我們的代碼就看起來(lái)非常糟糕，就像這樣的極端情況：

　　asyncFunc1(function(){

　　//...

　　asyncFunc2(function(){

　　//...

　　asyncFunc3(function(){

　　//...

　　asyncFunc4(function(){

　　//...

　　asyncFunc5(function(){

　　//...

　　});

　　});

　　});

　　});

　　});

　　如果我們改用Promise來(lái)處理，那么進(jìn)行一層簡(jiǎn)單的包裝即可。

　　function asyncFunc1(){

　　return new Promise(function (resolve, reject) {

　　//...

　　})

　　}

　　2、Promise的使用介紹

　　Promise的使用相對(duì)比較簡(jiǎn)單，我們?nèi)腴T可以參考下相關(guān)介紹：阮一峰 promise入門，如果我們?cè)贘S函數(shù)里面引入它的話，那么需要包含對(duì)應(yīng)的javascript組件

　　我們可以在Github上下載對(duì)應(yīng)的組件JS，引入小程序項(xiàng)目即可：es6-promise

　　我們?yōu)榱朔奖悖陧?xiàng)目中創(chuàng)建一個(gè)輔助類utils.js，然后在其中引入Promise的腳本，如下所示。

　　const Promise = require('./Promise') 
然后在APP.js里面，我們修改原來(lái)的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);

　　}

　　})

　　}

　　})

　　},

　　//全局對(duì)象

　　globalData: {

　　userInfo: null,

　　systemInfo: null

　　},

　　utils

　　})

　　我們看到，所有原先的函數(shù)，我們?nèi)绻枰隤romise處理的話，增加一層的函數(shù)體即可。

　　return new utils.Promise((resolve, reject) => {

　　// 原來(lái)的函數(shù)體代碼

　　}); 
這樣我們調(diào)用的時(shí)候，使用then函數(shù)進(jìn)行處理即可，類似下面的代碼。

　　getUserInfo().then(user => this.setData({userInfo:user})).catch(console.log); 
引入這個(gè)Promise后，我們?yōu)榱诉M(jìn)一步實(shí)現(xiàn)代碼的重用，可以把一些常見的函數(shù)放到utils.js來(lái)，這樣可以實(shí)現(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請(qǐng)求方法

　　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ā)布對(duì)應(yīng)的接口，以供其他模塊使用即可。

　　//發(fā)布的接口

　　module.exports = {

　　Promise,makeArray,getUserInfo,

　　get:requstGet,post:requstPost,requst,decodeHtml,

　　formatTime,getDateDiff

　　}

　　封裝好這些公用方法后，我們?cè)陧?yè)面里面進(jìn)行調(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);

　　});

　　而如果我們使用原來(lái)的函數(shù)，那么實(shí)現(xiàn)代碼如下所示。

　　// 使用標(biāo)準(zhǔn)的wx.request函數(shù)實(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);

　　}

　　})

　　如果對(duì)于復(fù)雜流程的函數(shù)處理，使用Promise來(lái)處理，會(huì)顯得更加簡(jiǎn)潔易讀。

微信小程序

• 2020-11-11微信小程序代開發(fā)全面調(diào)整 打通線下場(chǎng)景
• 2020-11-11微信小程序新增推廣功能：用戶搜關(guān)鍵詞就能找到
• 2020-11-09微信小程序開發(fā)用什么語(yǔ)言？
• 2020-11-11一篇文章讓你看懂哪些領(lǐng)域適合開發(fā)微信小程序
• 2020-11-11在佛山和臺(tái)州微信小程序開發(fā)多少錢 影響因素有哪些
• 2020-11-09微信小程序開發(fā)三大陷阱
• 2020-11-09微信小程序?qū)ι碳业乃拇蠛锰?
• 2020-11-11微信小程序裂變玩法，你gat到了嗎？
• 2020-11-11怎樣制作微信小程序？
• 2020-11-09佛山微信小程序開發(fā)(價(jià)格)常見疑問問答（下）
• 2020-11-11微信小程序有哪些新的可能性？
• 2020-11-11洛陽(yáng)建站 -廣州網(wǎng)頁(yè)設(shè)計(jì)制作-微信小程序開發(fā)