前言：

一般前端項目，我們都得考慮接口攔截器封裝，好處是代碼重用、減少冗余代碼、方便后期維護(hù)（想象一下錯誤處理或權(quán)限過期代碼你寫了幾十處，需要改個http status code碼得改幾十處）。下列代碼提供了常用的列表、新增、修改、刪除、文件上傳等方法，和token的處理等。由于之前項目比較趕，所以其實請求回調(diào)的代碼都是重復(fù)冗余的，大家實際使用時，可以稍微調(diào)整下，抽取統(tǒng)一的function進(jìn)行通用。

若需要拷貝代碼進(jìn)行直接使用，記得修改幾處位置的代碼，一個是狀態(tài)碼得處理，比如成功是200、token過期是401，都是常規(guī)的但是每個公司項目可能有差異。還有就是token過期我的跳轉(zhuǎn)路由和你肯定不一致，就得調(diào)整。

1、封裝request.js通用接口調(diào)用方法，達(dá)到接口攔截統(tǒng)一處理的效果

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過期，跳到授權(quán)頁面
      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過期，跳到授權(quán)頁面
      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過期，跳到授權(quán)頁面
      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過期，跳到授權(quán)頁面
      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過期，跳到授權(quán)頁面
      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過期，跳到授權(quán)頁面
      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請求，調(diào)用用戶基本信息的方法。使用時優(yōu)先需要引入文件方法，由于請求相關(guān)的錯誤代碼或者token過期處理，都在公共方法中處理攔截了，所以一般我們不需要關(guān)心錯誤回調(diào)進(jìn)行邏輯處理，當(dāng)然肯定會有某些特定需求，所以還是提供了錯誤回調(diào)進(jìn)行擴(kuò)展。

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

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    userInfo: {},
  },
  onShow() {
    this.getData();
  },
  getData() {
    fetchList('/hs/smallLoginController/getNowUserInto', {}, res => {
      this.setData({ userInfo: res.data.result })
    },err=>{
      // 在這里處理錯誤邏輯，若需要的話
   });
  },
})