微信小程序request 请求封装

关于微信小程序request 请求接口的封装，在此记录一下。 

封装如下：request.js 文件

/**
 * 获取header
 */
function getCommonHeader() {
  let header = {
    'Content-type': 'application/x-www-form-urlencoded'
  };
  // 如果token有值则带上
  let token = wx.getStorageSync("token");

  if (token) {
    header = Object.assign({}, header, {
      'Authorization': 'Bearer ' + token
    });
  }
  return header;
};

/**
 * 网络请求
 */
function request(url, data = {}, header = {}, method = "POST", config = {}) {

  // header 空值处理
  let _header = {
    "content-type": "application/x-www-form-urlencoded"
  };
  if (Object.keys(header).length > 0) {
    _header = header;
  }

  let showToast = true,
    showLoading = true,
    loadingTitle = "加载中";
  // 默认显示toast
  if (config['showToast'] != undefined && config['showToast'] == false) {
    showToast = false;
  }
  // 默认显示loading
  if (config['showLoading'] != undefined && config['showLoading'] == true) {
    showLoading = true;
  }
  if (config['loadingTitle']) {
    loadingTitle = config['loadingTitle'];
  }

  return new Promise((resolve, reject) => {
    // 是否显示loading
    if (showLoading) {
      wx.showLoading({ title: loadingTitle, icon: 'none', mask: true });
    }

    wx.request({
      url: url,
      data: data,
      header: _header,
      method: method,
      success: (res => {
        
        if (showLoading) {
          wx.hideLoading();
        }

        // 服务器 非200 错误
        if (res.statusCode && res.statusCode != 200) {
          wx.showToast({ title: '服务器 ' + res.statusCode + ' 错误', icon: 'none' });
          reject(res);
          return;
        }

        if (res.data && res.data.Success == false) {
          // 业务状态非0 是否提示
          if (showToast) {
            wx.showToast({ title: res.data.ServerMsg, icon: 'none' });
          }
          reject(res);
          return;
        }
        resolve(res.data.Data);
      }),
      fail: (err => {
        if (showLoading) {
          wx.hideLoading();
        }
        if (err.errMsg.indexOf('url not in domain list') > -1) {
          wx.showToast({ title: '请求url不在合法域名中，请打开调试模式', icon: 'none' });
        }
        if(err.errMsg.indexOf('timeout')){
          wx.showToast({ title: '请求超时，请重新进入', icon: 'none' });
        }
        reject(err);
      })
    });
  });
};


/**
 * get 网络请求
 */
function getRequest(url, data = {}, header = {}, config = {}){
  return request(url, data, header, "GET",config);
}

/**
 * post 网络请求
 */
function postRequest(url, data = {}, header = {}, config = {}){
  return request(url, data, header, "POST",config);
}

/**
 * put 网络请求
 */
function putRequest(url, data = {}, header = {}, config = {}){
  return request(url, data, header, "PUT",config);
}

/**
 * delete 网络请求
 */
function deleteRequest(url, data = {}, header = {}, config = {}){
  return request(url, data, header, "DELETE", config);
}

module.exports = {
  getCommonHeader,
  postRequest,
  getRequest,
  putRequest,
  deleteRequest,
}

调用如下：下面以get 和put 为例，其余类似。

一）：data 为传参数据，是一个对象。

二）：config 可以传入showToast ，showLoading，loadingTitle，三个字段自定义是否显示和加载文案，默认为显示和 '加载中' 。

三）：对于成功和失败后的返回结果，需要结合实际情况，修改对应的参数即可

api.js 文件

const utils = require('../request/request');
const baseUrl = 'https://xxxx'; 

module.exports = {

  // GET
  getUserInfo: function (data, config = {}) {
    return utils.getRequest(
      `${baseUrl}xxxxxxxx`,
      data,
      utils.getCommonHeader(),
      config
    );
  },

   // put 

  register: function (data, config = {}) {
    return utils.putRequest(
      `${baseUrl}xxxxx`,
      data,
      utils.getCommonHeader(),
      config
    );
  },
}

标签：封装,showToast,url,微信,request,data,header,config
来源： https://blog.csdn.net/qq_40247562/article/details/115004849