详解在微信小程序的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，引入小程序项目即可：

我们为了方便，在项目中创建一个辅助类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来处理，会显得更加简洁易读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。