微信小程序-网络请求封装

 

一、我使用两个js文件封装网络请求：

net.config.js用于配置服务器地址和接口地址

netUtil.js用于封装网络请求方法

二、这两个文件都放置于utils目录下

三、在对应页面的.js文件最上方导入使用

import config from '../../utils/net.config.js';
import netUtil from '../../utils/netUtil.js';

四、使用示例

  //获取banner
  getBanners() {
    var params = {}
    params.category = 0;
    params.status = 1;
    params.pages = 1;
    params.pagesize = 99;
    netUtil.getRequest(config.banner, params, "正在加载...",
      res => {
        this.setData({
          banners: res.data && res.data.list ? res.data.list : []
        })
      }
    )
  },

五、net.config.js和netUtil.js代码

//net.config.js

const base_url = "https://xxx.test.com/clab"
const img_url = "https://xxx.test.com"

const config = {

  base_url,
  img_url,

  //用户登录
  login: `${base_url}/auth/login`,
  //获取banner
  banner: `${base_url}/api/banner`,

}

export default config;

//netUtil.js

//header
function header() {
  const token = wx.getStorageSync('token');
  if (!token) {
    return {
      'content-type': 'application/json; text/plain;'
    }
  } else {
    return {
      'content-type': 'application/json;  text/plain;',
      'Authorization': `Bearer ${token}`
    }
  }
} 

//request
function callRequest(method, url, params, message, success, fail) {

  if (message != null) {
    wx.showLoading({
      title: message
    })
  }
  wx.showNavigationBarLoading();

  const requestTask = wx.request({
    url: url,
    data: params,
    header: header(),
    method: method,
    success: function (res) {
      console.log(res);
      if (res.statusCode >= 200 && res.statusCode < 400) {
        success && success(res);
      } else {
        fail && fail(res);
      }
    },
    fail: function (res) {
      console.log(res);
      fail && fail(res);
    },
    complete: function (res) {
      if (message != null) {
        wx.hideLoading();
      }
      wx.hideNavigationBarLoading()
    },
  })
  return requestTask;
}

// GET
function getRequest(url, params, message, success, fail) {
  return callRequest("GET", url, params, message, success, fail)
}

// POST
function postRequest(url, params, message, success, fail) {
  return callRequest("POST", url, params, message, success, fail)
}

//PUT
function putRequest(url, params, message, success, fail) {
  return callRequest("PUT", url, params, message, success, fail)
}

//DELETE
function deleteRequest(url, params, message, success, fail) {
  return callRequest("DELETE", url, params, message, success, fail)
}

//cancel request task
function abort(requestTask) {
  requestTask && requestTask.abort();
}


export default {
  getRequest,
  postRequest,
  putRequest,
  deleteRequest,
  abort,
}