Vue 网络请求封装

1.本片是最基础的网络请求封装: 将header，以及 onSuccess，和 onFail 封装。 只需要将url，以及请求体传入即可如下：参考

/**
 * 请求头：根据需要自行加参数
 */
var header = {
  'Cookie': wx.getStorageSync('cookieKey'),
  'version': '1.0.0'
}

/**
 * 供外部post请求调用  
 */
function post(url, params, onSuccess, onFailed) {
  console.log("请求方式：", "POST")
  request(url, params, "POST", onSuccess, onFailed);

}

/**
 * 供外部get请求调用
 */
function get(url, params, onSuccess, onFailed) {
  console.log("请求方式：", "GET")
  request(url, params, "GET", onSuccess, onFailed);
}

/**
 * function: 封装网络请求
 * @url URL地址
 * @params 请求参数
 * @method 请求方式：GET/POST
 * @onSuccess 成功回调
 * @onFailed  失败回调
 */

function request(url, params, method, onSuccess, onFailed) {
  console.log('请求url：' + url);
  wx.showLoading({
    title: "正在加载中...",
  })
  console.log("请求头：", header)
  
  if('' == params){
      wx.request({
        url: url,
        method: method,
        header: header,
        success: function(res) {
          wx.hideLoading();
          console.log('响应：', res.data);
      
          if (res.data) {
            /** start 根据需求 接口的返回状态码进行处理 */
            if (res.data.code == 1) {
              onSuccess(res.data); //request success
            } else {
              onFailed(res.data.message); //request failed
            }
            /** end 处理结束*/
          }
        },
        fail: function(error) {
          onFailed(""); //failure for other reasons
        }
      })
  }else{
      wx.request({
        url: url,
        data: dealParams(params),
        method: method,
        header: header,
        success: function(res) {
          wx.hideLoading();
          console.log('响应：', res.data);
      
          if (res.data) {
            /** start 根据需求 接口的返回状态码进行处理 */
            if (res.data.code == 1) {
              onSuccess(res.data); //request success
            } else {
              onFailed(res.data.message); //request failed
            }
            /** end 处理结束*/
          }
        },
        fail: function(error) {
          onFailed(""); //failure for other reasons
        }
      })
  }
 
}

/**
 * function: 根据需求处理请求参数：添加固定参数配置等
 * @params 请求参数
 */
function dealParams(params) {
  console.log("请求参数:", params)
  return params;
}


// 1.通过module.exports方式提供给外部调用
module.exports = {
  postRequest: post,
  getRequest: get
}

2. 以上写了两种请求方式，GET和POST。通过此方法，将post，get方法 供给外部调用

image.png

3. 外部调用

在<Script> 中引用 var requestTask = require('../../data/utils.js');

image.png

调用方法：

var self = this;
requestTask.postRequest(self.GLOBAL.baseUrl + 'nhservice/xxx',self.requestBody,
                  function(res){
                      console.log(res);
                      self.toMainHome();
                  },function(err){
                      console.log(err);
                     uni.showToast({
                        title: err,
                        icon:'none'
                      })
                  });

大功告成