В шоке, я один так управляю апи?

JavaScript

1. Отправная точка

Прочитав некоторые статьи по управлению API, я сильно отличаюсь от себя. (собачья голова)

Последовательность кода этой статьи начинается со звонка и отображается слой за слоем.

2. Эффект использования следующий

1. Добавить API

2. Добавьте файл аннотаций API .d.ts

На самом деле 1/2 можно унифицировать, но так как проект не чистый ts, рефакторить лень. Файл комментария .d.ts в конце статьи больше не является скриншотом.

3. Инкапсуляция уровня запроса API

1. Единая обработка данных

Потому что в проекте данные интерфейса единообразно инкапсулированы, и формат инкапсуляции следующий

{
 status:number;//接口状态
 msg:string;//接口信息，一般都是异常信息
 data:any;//实际获取的数据，需要拆箱获取
}
  • Для удобства при аномальной проверке данных выбрасывается исключение, а при его перехвате перехватчиком axios выполняется уведомление/диалог для подсказки.
  • который также настроилAPIStatusErrorобъект для пользовательской обработки сообщений об ошибках

2. Инкапсулируйте тип запроса axios

Также включает функцию загрузки файла postFileForm, как показано выше.

4. Глобальная конфигурация аксиом

Здесь нечего сказать, просто некоторая общая обработка и перехват аномальных данных, возвращаемых в http api

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();
};

5. Каталог API проекта

Каждый хорош, мой каталог выглядит следующим образом

6. Понимание

Если проект поддерживает это, это все еще может быть纯tsбудет лучше?

Категории