微信小程序HTTP请求封装

微信小程序HTTP请求封装

最近做的事情有些许的乱，一会儿Android，一会儿Ionic，一会又微信小程序。现在又要搞一个微信小程序，需要用到HTTP请求，好吧，其实只要不是单机小游戏，都会用到HTTP请求，微信小程序官方提供了HTTP请求的方法，其实封装的很好了，直接用就行，但是还是在封装一次吧，好维护一点。

HTTP请求封装

首先在page文件夹下创建一个js文件夹存放封装的http请求，其实放哪里看自己需要，都行。
在js文件夹下创建一个http.js文件，里面是封装好的http请求代码，其实叫啥名都行，看你心情。
里面封装的代码是这个样子的：

/**
 * TODO http请求封装
 * 王佳伟
 * 2020年3月19日13:43:48
 */

// 配置文件
const config = require('./config.js')
var app = getApp();
const host = config.httpServer; // 服务器baseUrl

/**
 * POST请求，
 * URL：接口
 * postData：参数，json类型
 * doSuccess：成功的回调函数
 * doFail：失败的回调函数
 */
function postData(url, postData, doSuccess, doFail) {
  wx.request({
    //项目的真正接口，通过字符串拼接方式实现
    url: host + url,
    // 这个header根据你的实际改！
    header: {
      'Content-Type': 'application/json',
      'cookie': config.httpToken,
      'Request-Origin': 'app'
    },
    data: postData,
    method: 'POST',
    success: function (res) {
      //参数值为res.data,直接将返回的数据传入
      if (res.data.result.token) { // 如果有token保存下来，下次请求带着token访问
        config.httpToken = res.data.result.token;
        console.log("token--> ", config.httpToken)
      }
      doSuccess(res.data);
    },
    fail: function () {
      doFail();
    },
  })
}

/**
 * GET请求，
 * URL：接口
 * getData：参数，json类型
 * doSuccess：成功的回调函数
 * doFail：失败的回调函数
 */
function getData(url, getData, doSuccess, doFail) {
  wx.request({
    url: host + url,
    header: {
      'Content-Type': 'application/json',
      'X-Access-Token': config.httpToken,
      'Request-Origin': 'app'
    },
    method: 'GET',
    data: getData,
    success: function (res) {
      doSuccess(res.data);
    },
    fail: function () {
      doFail();
    },
  })
}

/**
 * module.exports用来导出代码
 * js文件中通过var http = require("../util/request.js")  加载
 * 在引入引入文件的时候"  "里面的内容通过../../../这种类型，小程序的编译器会自动提示，因为你可能
 * 项目目录不止一级，不同的js文件对应的工具类的位置不一样
 */
module.exports.postData = postData;
module.exports.getData = getData;

里面使用了一个配置文件config.js，我把请求的服务器的BaseUrl放进去了，方便维护，config.js文件长下面这样：

module.exports = {
  httpServer: "http://localhost",  // 业务服务器地址 每个人的不一样，按照需要改！
  httpToken: null,  // 存放业务服务器提供的 token 
}

HTTP 使用

首先在需要使用HTTP请求的地方引入。

var http = require('../js/http.js')   // 每个人的路径不一样，按照自己的改

GET请求

http.getData('/getList', {}, (rep) => {
      console.log(rep)
    }, (error) => {
      console.log(error)
})

POST请求

     let canshu = {
      'username': 'wjw',
      'password': 'wjw'
    }
    http.postData('/login',canshu,(rep)=>{
      if (rep.status && rep.status != 200) {
        return;
      }
      console.log(rep);
    })

好，就这样吧！