微信小程序进阶－网络Promise封装

前言

最近一直在自学小程序开发，同时也在开发第一款小程序，在整个开发过程中，小程序给我的开发体会就是三方类库太少，要啥啥没有，官网提供的都是一些最基础类库，只能保证你能开发完基本功能，对于代码结构复用性方面完全要靠每个团队自己的造诣。虽然本人在前端开发方面经验较少，但是小程序确实比较简单容易上手，之前也写过一篇入门的小程序TODOlist的开发文章，从文章中可以发现小程序还是很好上手的，对于有一定前端经验的同学来说更是秒上手。

今天开始会发布一些小程序进阶的文章，笔者也是比较早的一批开发过移动端app的开发者，之前也开发过android和ios，小程序的现在有点像移动app开发刚火的时候，一切都是空白，都是百废待兴的状态，移动app从最早的MVC到MVP、MVVM，从单工程项目到项目模块化，从common基础类库到工程组件化，一切都是为了让工程具有可扩展性、可维护性和松耦合，今天进阶的第一篇先从网络请求封装开始说起，介绍下如何让小程序的网络请求更加清爽。

微信小程序网络请求缺点

因为js只有一个主线程，小程序底层也是基于js的，所以小程序框架自带的网络请求和Ajax请求非常相似都是异步请求，请求参数中需要送入url、method、data、header等参数，还要设置success成功的回调函数和fail失败的回调函数，成功和失败的callback定义方式和js里一样和很多原生框架里的异步调用也一样。

wx.request({  url: 'https://www.monkey01.club/test', //仅为示例，并非真实的接口地址  method: 'POST'  data: {     x: '' ,     y: ''  },  header: {      'content-type': 'application/json' // 默认值  },  success: function(res) {    console.log(res.data)  }})

但是大家有没有发现，如果多个接口有依赖那么这种通过异步回调的调用接口的方式会让代码非常难于阅读和维护，因为每个接口调用都需要在被依赖的接口的回调函数中去处理，这就产生了回调嵌套，如果只是2，3个接口依赖还好说，如果有7，8个接口依赖，那么这个嵌套的深度简直难以想象，后续接手这些代码的同学一定在心里默默诅咒你。

asyncFunc1(function(){  //...  asyncFunc2(function(){    //...    asyncFunc3(function(){      //...      asyncFunc4(function(){        //...        asyncFunc5(function(){           //...          asyncFunc6(function(){           //...        });        });      });    });  });});

那有没有什么比较好的办法去解决呢？当然有，那就是Promise。

JS中的Promise

Promise已经在ES6中原生支持了，目前主流的浏览器也都支持了Promise，Promise在JS的主流框架中基本也都支持。回调函数这种在某个时刻被执行的方式在编码中出现嵌套调用的话会让代码比较丑陋并且难以理解，Promise就是为了解决这个回调黑洞而产生的，通过Promise可以实现链式调用，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。

new Promise(test).then(function (result) {    console.log('成功：' + result);}).catch(function (reason) {    console.log('失败：' + reason);});

Promise的代码写起来就像上面这样，如果有多个接口有依赖那么可以串起来写, 需要注意的是为什么Promise能够这样一直then下去，就是因为每个then方法被调用后都会返回一个Promise对象，让下一个依赖者去处理，这样有多个接口依赖就形成了链式调用，接口异步调用依赖顺序一目了然，是不是脱离了回调黑洞。

new Promise(test1).then(function (result) {    console.log('test1成功：' + result);    return new Promise(test2);}).then(function (result){    console.log(('test2成功：' + result);}).catch(function (reason) {    console.log('失败：' + reason);});

不了解JS Promise的同学可以看看廖雪峰的这篇讲解Promise的文章，写的比较浅显易懂，https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000。

将Promise封装到小程序中

上面介绍了下JS里的Promise使用方式，那么下面我们要将Promise移植到小程序中，让小程序也能用上Promise。

我们这里采用分层的架构，将小程序网络请求单独封装到wxRequest.js中，将具体业务调用写到service层，最后在view层页面对应的js中写页面调用，下面依次看下代码。

//wxRequest.jsconst Promise = require('es6-promise.min.js');function wxPromise(method, url, data){  //返回一个Promise对象  return new Promise(function (resolve, reject) {    wx.request({      url: url,      method: method,      data: data,      //在header中统一封装报文头，这样不用每个接口都写一样的报文头定义的代码      header: {      "Content-Type": "application/json"       },      success: function(res){        setTimeout(function () {          wx.hideLoading();        }, 100);        //这里可以根据自己项目服务端定义的正确的返回码来进行，接口请求成功后的处理，当然也可以在这里进行报文加解密的统一处理        if(res.data.rtnCode == "000000"){          resolve(res);        }else{          //如果出现异常则弹出dialog          wx.showModal({            title: '提示',            content: res.data.errCode + '系统异常',            confirmColor: '#118EDE',            showCancel: false,            success: function (res) {              if (res.confirm) {              }            }          });        }      },      fail: function(res){        setTimeout(function () {          wx.hideLoading();        }, 100);        wx.showToast({          title: '服务器暂时无法连接',          icon: 'loading',          duration: 2000        })        reject(res);      }    });  });}function getRequest(url, data){  return wxPromise("GET", url, data);}function postRequest(url, data){  return wxPromise("POST", url, data);}module.exports = {  wxPromise: wxPromise,  postRequest: postRequest,  getRequest: getRequest,}

在service层使用封装的Promise，分别定义两个业务接口调用，这两个业务接口返回的斗士Promise对象。

//service.jsconst wxRequest = require('wxRequest.js');const config = require("config.js");function getBusInfoPromise(busName, stopType){  var getBusInfoUrl = config.url.getBusInfo;  var data = { "busName": busName, "stopType": stopType }  return wxRequest.wxPromise("POST", getBusInfoUrl, data);}function getBusStopListPromise(sid, stopType) {  var getStopListUrl = config.url.getBusStopList;  var data = { "sid": sid, "stopType": stopType }  return wxRequest.wxPromise("POST", getStopListUrl, data);};

在wxml对应的页面的js中进行业务接口调用，从调用方式可以看到，第一个then里面定义了第一个getBusInfoPromise接口调用的resolve处理函数，因为第二个接口getBusStopListPromise依赖于第一个接口，所以在第一个接口的resolve的方法中调用了getBusStopListPromise方法并将Promise对象返回，在第二个then中定义resolve的处理方法，如果还有第三个接口依赖，那么调用方式类似。这样是不是很好的解决了回调重重嵌套的问题。

//page.jsconst service = require('../../utils/service.js');Page({  onLoad: function(){    this.getBusInfo();  },  getBusInfo: function () {    service.getBusInfoPromise("636路", "0").then(res => {      return service.getBusStopListPromise(res.data.data.sid, res.data.data.stopType)    }).then(res => {      console.log(res.data.rtnMsg);    });  }})

原著是一个有趣的人,若有侵权,请通知删除