溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-09-30 11:43:08 來(lái)源：腳本之家 閱讀：141 作者：伍華聰 欄目：web開(kāi)發(fā)

在我們傳統(tǒng)的Javascript開(kāi)發(fā)函數(shù)編寫(xiě)中，我們習(xí)慣了回調(diào)函數(shù)的處理，不過(guò)隨著回調(diào)函數(shù)的增多，以及異步處理的復(fù)雜性等原因，代碼越來(lái)越難讀，因此誕生了使用Promise來(lái)優(yōu)化JS函數(shù)處理的需求，引入Promise確實(shí)能夠很好的解決異步回調(diào)函數(shù)的可讀性等問(wèn)題，同時(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)代碼的重用，可以把一些常見(jià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)潔易讀。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手