微信小程序request(ajax)接口请求封装

最近在进行小程序的编写，需要调用后端接口，经常要用到wx.request方法，所以就自己封装了一下，简化一下代码

1、app.js  创建全局数据

App({
  // 全局数据
  globalUrl:{
    url:"http://localhost:8081/demo/" 
　}
})

 

2、方法封装（新建文件夹util，工具文件，在文件夹下创建utils.js文件，用于对方法封装；请求地址提取出来使用app.js中的url）

utils.js

// 全局request封装
/**
* config:{
*  url:'',
*  method:'',
*  data:""
* }
*/

/**
 * 请求方式可传，不传为GET
 * postData：参数，json类型
 * callback：成功的回调函数
 * errorCallBack：失败的回调函数
 */

const APP = getApp();
//项目URL相同部分，减轻代码量，同时方便项目迁移
const REQUESTURL =  APP.globalUrl.url;
function request(config, callback, errorCallBack) {
    //请求接口时默认loading效果，黑色本框转圈圈
    wx.showLoading();
    wx.request({
      url: REQUESTURL+config.url,
      method:config.method?config.method:"GET",
      data:config.data?config.data:"",
      success(res){
        if(res.data.code==200){
          wx.hideLoading();     　　　　　　　　//隐藏loading
          //默认成功展示对号
          if (callback) {
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000
            })
            callback(res)
          }
        }else if(res.data.code==406){
        //跳转登录
        }else{
          wx.hideLoading();　　　　　　　　　　　//隐藏loading
          if (errorCallBack) {
            errorCallBack(res)
          } else {
             wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000
            })
          }
        }
      }
    })
}
module.exports = {
  request: request
}          

 

3、请求封装函数的引用，page里面创建一个文件夹index，创建四种文件，在js里面加入：

/**
*引入getApp();是app.js中的全局数据URL
*utils引入使用请求封装函数
*/
const APP = getApp();
var utils = require("../util/utils.js");
Page({
  /**
   * 页面的初始数据
   */
  data: { },
  onLoad: function (options) {
    var that = this;
    var getVinUrl = "/survey/getVin/";
　　 //ajax请求
    utils.request({ url: getVinUrl, method: 'GET', data: this.data.phone }, function (res) {
      //请求成功
      connsole.log(res);
    }, function (err) {
      //请求失败
      connsole.log(err);
     });
  }    
})