震驚，難道只有我是這麼管理api的？

一.起點

看了些管理api的文章，和本身大有不一樣，拋磚引玉，望各位口下留德，切勿不識擡舉。（狗頭）vue

本文代碼順序從調用開始，層層向裏展現。ios

二.使用效果以下

1.添加API

2.添加API .d.ts註釋文件

其實 1/2能夠統一，可是因爲項目不是純ts的，就懶得重構了。文章後面的註釋.d.ts文件就再也不截圖了axios

三.API請求層封裝

1.統一處理數據

因爲項目中，接口數據統一有封裝，封裝格式以下api

{
 status:number;//接口狀態
 msg:string;//接口信息，通常都是異常信息
 data:any;//實際獲取的數據，須要拆箱獲取
}
複製代碼

爲了方便，數據校驗異常時，拋出異常，axios 攔截器攔截到時，進行notify/dialog進行提示。
其中還自定義了一個APIStatusError對象，用於自定義處理錯誤信息

2.封裝axios請求類型

還包括上圖的上傳文件function postFileForm 服務器

四.全局axios配置

此處沒什麼好說的，就是一些通用的處理，以及攔截http api中返回的異常數據markdown

import axios from "axios";
import { API_SUCCESS, NocaughtErrorUrl } from "@api/CONSTANT";
import { curEnvAPIURL } from "../statics/config/config";
import { SessionStorage } from "quasar";

export default ({ Vue, store }) => {
  let vueInstance = new Vue();
  
  //自定義狀態map
  let CustomizeStatus = { SessionExpired: 901 };
  
  //一般http code 對應的message
  const codeMessage = {
    200: "服務器成功返回請求的數據。",
    201: "新建或修改數據成功。",
    202: "已有請求已經進入後臺排隊（異步任務）。",
    204: "刪除數據成功。",
    400: "發出的請求有錯誤，服務器沒有進行新建或修改數據的操做。",
    401: "用戶沒有權限（令牌、用戶名、密碼錯誤）。",
    403: "用戶獲得受權，可是訪問是被禁止的。",
    404: "發出的請求針對的是不存在的記錄，服務器沒有進行操做。",
    406: "請求的格式不可得。",
    410: "請求的資源被永久刪除，且不會再獲得的。",
    422: "當建立一個對象時，發生一個驗證錯誤。",
    500: "服務器發生錯誤，請檢查服務器。",
    502: "網關錯誤。",
    503: "服務不可用，服務器暫時過載或維護。",
    504: "網關超時。"
  };

  function axiosInit() {
    let baseURL = apiUrl;

    //一些默認設置
    axios.defaults.baseURL = curEnvAPIURL;//當前環境的api url前綴，因爲本項目上線服務器較多，爲方便，統一在此處理。
    axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
    axios.defaults.withCredentials = true;
    axios.defaults.timeout = 2 * 60 * 1000;

    axios.interceptors.request.use(
      config => {
        return config;
      },
      error => {
        console.error(error);
      }
    );

    axios.interceptors.response.use(
      response => {
        vueInstance.$q.loading.hide();
        let result = response.data;
        if (result.status === CustomizeStatus["SessionExpired"]) {
          //-----> 用戶狀態超時回調
          return response;
        }
        
        //http code異常時彈出dialog
        if (response.status !== 200) {
          vueInstance.$q.dialog({
            title: "錯誤",
            message: `請求失敗：${codeMessage[response.status]}`
          });
          return response;
        }
        
        //TODO:異常埋點，待對接api
        
        //項目中存在某些不須要捕捉異常的api，此處特殊處理
        if (
          result.status !== API_SUCCESS &&
          NocaughtErrorUrl.every(_ => !response.config.url.includes(_))
        ) {
          vueInstance.$q.dialog({
            title: "錯誤",
            message: `${result.status}：${result.msg}` || `請求異常，CODE:${result.status}`
          });
        }
        return response;
      },
      error => {
        let errorMsg;
        
        //接口返回的{status:number;msg:string,data:any}中的status異常時，dialog提示
        try {
          let statusCode = error.response.status;
          errorMsg = `${statusCode}：${codeMessage[statusCode]}`;
        } catch {
          errorMsg = error.message;
        }
        //優先提示狀態碼對應的錯誤
        if (!errorMsg) {
          errorMsg = error.message;
        }

        vueInstance.$q.dialog({
          title: "錯誤",
          message: `請求失敗：${errorMsg}`
        });

        return Promise.reject(error);
      }
    );

    Vue.prototype.$http = axios;
  }
  axiosInit();
};

複製代碼

五.項目API目錄

各有所好，本人目錄以下app

六.感悟

項目支持的話，可能仍是純ts會好些吧？異步