前言

任何一个app或者小程序，只要涉及到数据交互，就必然要写联网请求的代码，比如安卓中目前最主流的联网框架Retrofit，那么在小程序中，我们应该怎么跟后台进行交互呢？

官方文档wx.request

官方给我们提供了相应的API，我们只需要去调用即可

示例代码

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  success: function(res) {
    console.log(res.data)
  }
})

看似很简洁对吧，但是在开发中，我们一般都会在header中携带一些公共的参数，比如appVersion，versionCode，token等等，如果我们不做封装的话，每一次发起请求我们都要把这些参数重复写一遍，这样代码看起来就非常冗余，并且浪费时间，那么我们可以对wx.request做一个封装，把公共的参数放在里面，外面的请求只需要关心自己需要携带的其他参数即可。

封装

当你新建一个小程序的时候，会自动生成utils文件夹以及util文件，既然如此，那我们就把封装放到这里好了。

思路

用户传入url，额外的参数和app.globalData，剩下的请求我们帮用户完成即可，至于为什么要传入app.globalData，是因为util中拿不到，所以只能通过用户传进来，并且很多参数都是保存在app.globalData中，比如token这些。

function request(url, globalData, data) {
  return new Promise(function (resolve, reject) {
    var token = globalData.token
    //根据服务器是正式还是测试决定传入的参数，后续但凡涉及到env判断都是如此
    let appSecret = globalData.env == "release" ? "12345" : "67890"
    let sign = {
      "appKey": globalData.env == "release" ? "12345" : "67890",
      "appCode": "lxt",
      "appVersion": "1.0.0",
      "appClient": /Android/.test(globalData.system.system) ? 'andriod' : 'ios',//判断用户是安卓还是ios
      "timestamp": new Date().getTime(),
      "versionCode": '1',
      "channel": "wx",
    }
    let params = {
      ...sign,//拿到上面的sign，如果不想分开写，也可以吧sign中的参数直接拷贝到这里是一样的效果
      "token": token ? token : ""//判断是否有token，如果有就携带，否则给""
    };
    //把所有的参数变成json
    let basicParams = JSON.stringify(params);
    //发起请求，因为我们都是post请求，所以我这边直接写死了，如果大家有不同的请求方式可以加判断
    wx.request({
      method: 'POST',
      url: url,
      header: {
        "content-type": "application/json",
        "basicParams": basicParams//把公共的头部放进来
      },
      data: data,//这是用户传进来的参数
      success(res) {
        resolve(res);//请求成功之后的回调并且把res携带过去
      },
      fail(res) {
        reject(new Error(res))//请求失败之后的回调并且把res携带过去
      }
    })
  })
}

在代码中使用

1.在需要用到请求的js中添加

const { request } = require('../../utils/util.js')

2.发起请求

 let globalData = app.globalData
 let data = {
    //比如你要携带一个名为packerCode的参数
   'packetCode': globalData.packetCode
 };
 let url = globalData.serverHost + 'test';//传入url
 request(url, globalData, data)//发起请求
   .then(res => {
      //请求成功，do something
   }).catch(res => {
      //请求失败
   })

app.js中

 this.globalData.system = wx.getSystemInfoSync()
 //配置运行环境
 var env = this.globalData.env
 let host = {
    test: "http://www.test.com",
    release: "https://www.release.com"
 }
 this.globalData.serverHost = host[env];

globalData

env: 'test',
system:'',
serverHost:'',
token:'',
packetCode:''