微信小程序封装请求

在写小程序的时候，每个JS文件都一大堆的请求，看得自己都眼花缭乱，下面看一下怎么对请求方法进行封装。

1，方法封装,在util文件夹下新建文件，创建request.js文件，工具文件，用于对方法封装）

request.js

var app = getApp();
//项目URL相同部分，减轻代码量，同时方便项目迁移 
//调用url配置文件 文件config.js是对项目的所有url进行封装 便于管理
const CONFIG = require('../..//utils/config.js');

/** * POST请求， * URL：接口 * postData：参数，json类型 * doSuccess：成功的回调函数 * doFail：失败的回调函数 */
function request(url, postData, doSuccess, doFail) {
  wx.request({ //项目的真正接口，通过字符串拼接方式实现 
    url: CONFIG.API_UEL.url,//后面的url并非真实接口 真正的接口要看你前端请求后端 后端提供的接口
    header: {
      "content-type": "application/json;charset=UTF-8"
    },
    data: postData,
    method: 'POST',
    success: function(res) { //参数值为res.data,直接将返回的数据传入 
      doSuccess(res.data);
    },
    fail: function() {
      doFail();
    },
  })
}
//GET请求，不需传参，直接URL调用，
function getData(url, doSuccess, doFail) {
  wx.request({
    url: CONFIG.API_UEL.url,//后面的url并非真实接口 真正的接口要看你前端请求后端 后端提供的接口
    header: {
      "content-type": "application/json;charset=UTF-8"
    },
    method: 'GET',
    success: function(res) {
      doSuccess(res.data);
    },
    fail: function() {
      doFail();
    },
  })
} /** * module.exports用来导出代码 * js文件中通过var call = require("../util/request.js") 加载 * 在引入引入文件的时候" "里面的内容通过../../../这种类型，小程序的编译器会自动提示，因为你可能 * 项目目录不止一级，不同的js文件对应的工具类的位置不一样 */
//对于抛出的方法较多的时候 我们可以以对象的形式抛出
module.exports = {
  request:request,
  getData:getData
}

上面提到了url配置文件config.js,看看是怎么封装的吧。

const BASE = 'http://xxxx.com';//服务器域名
const CONFIG = {
  API_URL: {
    URL: BASE, //根路径


    //所有轮播图
    index: BASE + '/index', //首页的轮播图
    // rotation: BASE +'/rotation',//总轮播图请求

    //主页请求类型 
    screen: BASE + '/screen',

    // 个人登录s
    checklogin: BASE + '/checklogin',
    getphone: BASE + '/getphone', //获取手机号

    // 子分类接口 
    submenu: BASE + '/submenu',

    //合作接口
    cooperation: BASE + '/cooperation',

    //教师选择类型
    teachertype: BASE + '/teachertype',
    edit_teacher: BASE + '/edit_teacher', //教师入驻更改
    
    personal: BASE + '/personal',//个人中心请求
  }
}
module.exports = CONFIG;

2.page里面的页面要请求的话，在JS代码中

//引入代码 
var call = require("../util/request.js");
Page({
  data: {
    pictureList: [],
  },
  onLoad: function() {
    var that = this; //调用封装的方法，为了方便我直接在页面加载的时候执行这个方法
     call.getData('lunbo.do', this.shuffleSuc, this.fail); //this可以换成前面定义的that 
//this.shuffleSuc调用成功的参数
    this.loadMsgData(that);
  },
  shuffleSuc: function(data) {
    var that = this;
    that.setData({
      pictureList: data.rows
    }) 
    //我后面测试了一下，直接this.setData也可以，但是因为我在没有使用封装方法的时候 
    //this.setData报过错，不能直接用this，所以我在赋值的时候一般都会加上var that = this; 
    //这句话算是一个不是习惯的习惯 
  },
  fail: function() {
    console.log("失败")
  },
})

调用this.shuffleSuc方法其实就是执行传入getData的参数doSuccess 返回数据，这样就可以减少代码冗余，

微信小程序 封装请求

微信小程序封装请求