通常為了介面呼叫的統一性，每個專案都會根據需求封裝請求函式，在自己封裝的請求中，可以做一些通用的操作

以下封裝好的全域性通用請求函式。當已登入時，傳送的請求頭帶有token標誌使用者，當未登入時，傳送的請求頭無token。

每個函式，傳入引數（介面地址，資料，成功回撥函式，失敗回撥函式）

const URL_PREV = "https://******.com/api/";

//一級封裝：封裝wx通用請求（get/post/put/delete）
//1. 有使用者登入請求頭帶有token，無使用者登入請求頭不帶token
//2. 新增請求url域名字首
//3. 請求成功（code==200）執行成功回撥函式，請求失敗執行失敗回撥函式
const global = {
  get:function(url,data,successCb,errorCb){
    let token = wx.getStorageSync('token');
    let header;
    if (token) {
      header = {
        'content-type':'application/json',
        'x-token':token
      };
    }else {
      header = {
        'content-type':'application/json'
      };
    }
    wx.request({
      url:`${URL_PREV}${url}`,
      header:header,
      method:'GET',
      data:data,
      success:function(res){
        let code = res.data.code;
        if (code==200) {
          successCb(res.data.data);
        }else {
          errorCb(res.data.message);
        }
      },
      fail:function(err){
        errorCb(err);
      }
    });
    uploadFormIds();
  },
  post:function(url,data,successCb,errorCb){
    let token = wx.getStorageSync('token');
    let header;
    if (token) {
      header = {
        'content-type':'application/json',
        'x-token':token
      };
    }else {
      header = {
        'content-type':'application/json'
      };
    }
    wx.request({
      url:`${URL_PREV}${url}`,
      header:header,
      method:'POST',
      data:data,
      success:function(res){
        let code = res.data.code;
        if (code==200) {
          successCb(res.data.data);
        }else {
          errorCb(res.data.message);
        }
      },
      fail:function(err){
        errorCb(err);
      }
    });
  },
  delete:function(url,data,successCb,errorCb){
    let token = wx.getStorageSync('token');
    let header;
    if (token) {
      header = {
        'content-type':'application/json',
        'x-token':token
      };
    }else {
      header = {
        'content-type':'application/json'
      };
    }
    wx.request({
      url:`${URL_PREV}${url}`,
      header:header,
      method:'DELETE',
      data:data,
      success:function(res){
        let code = res.data.code;
        if (code==200) {
          successCb(res.data.data);
        }else {
          errorCb(res.data.message);
        }
      },
      fail:function(err){
        errorCb(err);
      }
    });
  },
  put:function(url,data,successCb,errorCb){
    let token = wx.getStorageSync('token');
    let header;
    if (token) {
      header = {
        'content-type':'application/json',
        'x-token':token
      };
    }else {
      header = {
        'content-type':'application/json'
      };
    }
    wx.request({
      url:`${URL_PREV}${url}`,
      header:header,
      method:'PUT',
      data:data,
      success:function(res){
        let code = res.data.code;
        if (code==200) {
          successCb(res.data.data);
        }else {
          errorCb(res.data.message);
        }
      },
      fail:function(err){
        errorCb(err);
      }
    });
  }
}


//二級封裝：對一級封裝做處理
//1. 返回 promise
//2. 捕捉異常。請求失敗丟擲異常，進行toast彈框提示使用者請求結果失敗
export const Request = {
  get:function(url,data){
    return new Promise((resolve, reject) => {
      global.get(url,data,function(res){
        resolve(res);
      },function(err){
        reject(err)
      });
    }).catch(function(e){
      if (e!="token_not_provided") {
        wx.showToast({
           title: e,
           icon: 'none',
           duration: 1500
        })
      }
    });
  },
  post:function(url,data){
    return new Promise((resolve, reject) => {
      global.post(url,data,function(res){
        resolve(res);
      },function(err){
        reject(err)
      });
    }).catch(function(e){
      wx.showToast({
         title: e,
         icon: 'none',
         duration: 1500
      })
    });
  },
  put:function(url,data){
    return new Promise((resolve, reject) => {
      global.put(url,data,function(res){
        resolve(res);
      },function(err){
        reject(err)
      });
    }).catch(function(e){
      wx.showToast({
         title: e,
         icon: 'none',
         duration: 1500
      })
    });
  },
  delete:function(url,data){
    return new Promise((resolve, reject) => {
      global.delete(url,data,function(res){
        resolve(res);
      },function(err){
        reject(err);
      });
    }).catch(function(e){
      wx.showToast({
         title: e,
         icon: 'none',
         duration: 1500
      })
    });
  }
}
 

如何使用封裝好的通用請求函式，如下

import {Request } from './util'

//使用者地址
export const Addresses = {
  get:function(){ return Request.get('addresses',null); },  //獲取使用者地址列表
  post:function(data){ return Request.post('addresses',data); },  //新增使用者地址
  put:function(data){ return Request.put(`addresses/${data.id}`,data); },  //修改使用者地址
  delete:function(id){ return Request.delete(`addresses/${id}`,null); } //刪除使用者地址
}






// 如何使用封裝好的介面API

async function getAddress(){
    let result = await Addresses.get(); 
    ...
}
async function delAddress(id){
    let result = await Addresses.delete(id); 
    ...
}
 

封裝解析

一級封裝：global物件

用於封裝通用請求函式。將global物件export，可以直接使用global.get / global/post等方法，一次封裝，每次呼叫都無需關心請求的語法，只需注重自己的邏輯處理，傳入請求url，請求資料，成功回撥函式，失敗回撥函式即可。

二級封裝：Request物件

因為專案使用的是es6語法，用promise處理非同步請求，基於一級封裝的基礎再做一層封裝，用於返回promise物件。此層封裝對資料做簡單的處理，請求結果成功直接返回data，請求結果失敗則toast提示使用者

在封裝的基礎上，請求介面的編寫就變得十分容易，不需要寫重複冗長的程式碼

一行程式碼便可以完成請求介面的編寫

Request.get（url，data）

Request.post（url，data）

Request.put（url，data）

Request.delete（url，data）