微信小程序之封装网络数据请求

每个程序请求数据都用wx.request太过繁琐，于是就想到把网络请求简单封装一下，减轻代码量，也方便以后代码迁移，复用。

首先，要在pages文件夹下建立一个公用工具文件夹，把公用请求方法request.js
放在该文件夹下，如下：

屏幕快照 2019-04-25 上午11.51.03.png

request.js里面内容

var app = getApp();
//项目URL相同部分
var host = 'https://mini.syl.net.cn/';

/**
* POST请求，
* URL：接口
* postData：参数，json类型
* onStart():显示加载圈
* doSuccess：成功的回调函数
* doFail：失败的回调函数
*/
function request(url, postData, onStart, doSuccess, doFail) {
  console.log('接口---参数', url, postData);
  onStart();
  wx.request({
    //项目的真正接口，通过字符串拼接方式实现
    url: host + url,
    header: {
      "content-type": "application/json;charset=UTF-8"
    },
    data: postData,
    method: 'POST',
    success: function (res) {
       console.log(res.data);
      //参数值为res.data,直接将返回的数据传入
       if (res.data.stateCode == 100) {
        doSuccess(res.data);
      } else {
        wx.showToast({
          title: res.data.message,
        })
      }
    },
    fail: function () {
      doFail();
    },
  })
}

//GET请求，不需传参，直接URL调用，
function getData(url, doSuccess, doFail) {
  wx.request({
    url: host + url,
    header: {
      "content-type": "application/json;charset=UTF-8"
    },
    method: 'GET',
    success: function (res) {
      if (res.data.stateCode == 100) {
        doSuccess(res.data);
      } else {
        wx.showToast({
          title: res.data.message,
        })
      }
    },
    fail: function () {
      doFail();
    },
  })
}

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

公用方法的引用：
首先，在你要用的.js里如下引入该文件：

// pages/main/main.js
var call = require("../util/request.js");

请求数据的方法：

 //获取数据
queryAction: function(res) {
  var value = wx.getStorageSync('openid')
  if (value) {
    var dic = { miniopenid: wx.getStorageSync('openid') };
    call.request('minipoint/activity', dic, this.onStart, this.onSuccess, this.onFailed);
  }else {
    wx.showToast({
      title: msg,
      
    })
  }

},

然后分别实现this.onStart, this.onSuccess, this.onFailed方法

 onStart: function (res) {
    wx.showLoading({
      title: "正在加载",
    })
  },
  onSuccess: function (res) { //onSuccess回调
    wx.hideLoading();
    console.log(res);

    if (res.stateCode != 100){
    
      console.log(res.message);
      this.show({
        iconToast: '', // 对：icon-dui, 错：icon-cuo,警告：icon-warning
        imageToast:'',
        textToast: res.message,
        duration:100,
      })
     if(res.stateCode == 110){
       wx.redirectTo({
         url: '../phone/phone',
       })
     }
    }else {
      this.setData({
        items: res.data.ActivityProduct, //请求结果数据
        activity: res.data.activity,
        points: res.data.Points
      })
    }
  
  },
  onFailed: function (msg) { //onFailed回调
    wx.hideLoading();
    console.log(res);
    if (msg) {
    wx.showToast({
    title: msg,
    })
    }
  },