微信小程序请求拦截器封装

前言：

一般前端项目，我们都得考虑接口拦截器封装，好处是代码重用、减少冗余代码、方便后期维护（想象一下错误处理或权限过期代码你写了几十处，需要改个http status code码得改几十处）。下列代码提供了常用的列表、新增、修改、删除、文件上传等方法，和token的处理等。由于之前项目比较赶，所以其实请求回调的代码都是重复冗余的，大家实际使用时，可以稍微调整下，抽取统一的function进行通用。

若需要拷贝代码进行直接使用，记得修改几处位置的代码，一个是状态码得处理，比如成功是200、token过期是401，都是常规的但是每个公司项目可能有差异。还有就是token过期我的跳转路由和你肯定不一致，就得调整。

1、封装request.js通用接口调用方法，达到接口拦截统一处理的效果

var app = getApp();

const baseUrl = 'https://test/api.com';

// 获取列表
const fetchList = (url, data, callback, errCallback) => {
    let token = wx.getStorageSync('token')
    wx.showLoading();
    wx.request({
        url: baseUrl + url,
        header: {
      'X-Access-Token': token,
        },
        method: 'GET',
        data: data,
        success: function (res) {
            wx.hideLoading();
            // token过期，跳到授权页面
      if (res.data.code === 401) {
                wx.reLaunch({
                    url: '/pages/basicFunction/login/login'
                })
                return;
            }

      if (res.data.code !== 200) {
        if (errCallback){
          return errCallback(res);
        }
                wx.showToast({
                    title: res.data.message,
                    icon: 'none'
                });
                return;
            }

            callback(res);
                
        }
    })
}

// 获取详情
const fetchDetail = (url, data, callback, errCallback) => {
    wx.showLoading();
    let token = wx.getStorageSync('token')

    wx.request({
        url: baseUrl + url,
        header: {
      'X-Access-Token': token,
        },
        method: 'GET',
        data: data,
        success: function (res) {
            wx.hideLoading();
            // token过期，跳到授权页面
      if (res.data.code === 401) {
                wx.reLaunch({
                    url: '/pages/basicFunction/login/login'
                })
                return;
            }

      if (res.data.code !== 200) {
        if (errCallback) {
          return errCallback(res);
        }
                wx.showToast({
                    title: res.data.message,
                    icon: 'none'
                });
                return;
            }

            callback(res);

        }
    })
}

// 新增
const fetchAdd = (url, data, callback, errCallback, hide) => {
    !hide && wx.showLoading();
    let token = wx.getStorageSync('token')

    wx.request({
        url: baseUrl + url,
        header: {
      'X-Access-Token': token
        },
        method: 'POST',
        data: data,
        success: function (res) {
            wx.hideLoading();
            // token过期，跳到授权页面
      if (res.data.code === 401) {
                wx.reLaunch({
                    url: '/pages/basicFunction/login/login'
                })
                return;
            }

      if (res.data.code !== 200) {
        if (errCallback) {
          return errCallback(res);
        }
                wx.showToast({
                    title: res.data.message,
                    icon: 'none'
                });         
                return;
            }
            callback(res);

        }
    })
}

// 修改
const fetchUpdate = (url, data, callback, errCallback) => {
    wx.showLoading();
    let token = wx.getStorageSync('token')

    wx.request({
        url: baseUrl + url,
        header: {
      'X-Access-Token': token,
        },
        method: 'PUT',
        data: data,
        success: function (res) {
            wx.hideLoading();
            // token过期，跳到授权页面
      if (res.data.code === 401) {
                wx.reLaunch({
                    url: '/pages/basicFunction/login/login'
                })
                return;
            }

      if (res.data.code !== 200) {
        if (errCallback) {
          return errCallback(res);
        }
                wx.showToast({
                    title: res.data.message,
                    icon: 'none'
                });     
                return;
            }
            callback(res);
        }
    })
}

// 删除
const fetchDelete = (url, data, callback, errCallback) => {
    wx.showLoading();
    let token = wx.getStorageSync('token')

    wx.request({
        url: baseUrl + url,
        header: {
      'X-Access-Token': token
        },
        method: 'DELETE',
        data: data,
        success: function (res) {
            wx.hideLoading();
            // token过期，跳到授权页面
      if (res.data.code === 401) {
                wx.reLaunch({
                    url: '/pages/basicFunction/login/login'
                })
                return;
            }

      if (res.data.code !== 200) {
        if (errCallback) {
          return errCallback(res);
        }
                wx.showToast({
                    title: res.data.message,
                    icon: 'none'
                });         
                return;
            }

            callback(res);

        }
    })
}

// 文件上传
const fetchUpload = (data, callback, errCallback) => {
    let token = wx.getStorageSync('token')

    wx.showLoading();
    wx.uploadFile({
        url: baseUrl+'/hs/sys/common/uploadOss',
        filePath: data.filePath,
        name: 'file',
        header: {
            'X-Access-Token': token,
        },
        success(res) {
            let data = JSON.parse(res.data)
            wx.hideLoading();
            // token过期，跳到授权页面
      if (data.code === 401) {
                wx.reLaunch({
                    url: '/pages/basicFunction/login/login'
                })
                return;
            }

      if (data.code !== 200) {
        if (errCallback) {
          return errCallback(res);
        }
                wx.showToast({
                    title: res.data.message,
                    icon: 'none'
                });         
                return;
            }

            callback(data);
        }
    })
}

module.exports = {
    fetchList: fetchList,
    fetchAdd: fetchAdd,
    fetchUpdate: fetchUpdate,
    fetchDetail: fetchDetail,
    fetchDelete: fetchDelete,
    fetchUpload: fetchUpload
}

2、使用方式及说明

下面的代码建议演示了使用get请求，调用用户基本信息的方法。使用时优先需要引入文件方法，由于请求相关的错误代码或者token过期处理，都在公共方法中处理拦截了，所以一般我们不需要关心错误回调进行逻辑处理，当然肯定会有某些特定需求，所以还是提供了错误回调进行扩展。


import { fetchList } from '../../../utils/request.js'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {},
  },
  onShow() {
    this.getData();
  },
  getData() {
    fetchList('/hs/smallLoginController/getNowUserInto', {}, res => {
      this.setData({ userInfo: res.data.result })
    },err=>{
      // 在这里处理错误逻辑，若需要的话
   });
  },
})