axios request リクエストをカプセル化する (一般的な) メソッド

それが達成できたら、「いいね！」とシェアを忘れずに、ありがとうございます~

1. まずサービスフォルダーを作成します

その中に app.ts という名前の新しいファイルを作成し、その中に config フォルダーを作成して api.ts を作成し、次にモジュールごとに分割されたビジネス フォルダー testModule を作成してその中にindex.ts を作成します。

2. 次に、api.ts でいくつかの通常の定数を設定します。

let BASE_URL = "/api";
const TIME_OUT = 20000;
// if (
//   location.host.toLowerCase().indexOf("localhost") !== -1 ||
//   location.host.toLowerCase().indexOf("127.0.0.1") !== -1
// ) {
    
    
//   BASE_URL = "/";
// } else {
    
    
//   BASE_URL = location.origin.toLowerCase() + "/";
// }
const METHOD = {
    
    
  GET: "GET",
  POST: "POST",
  PUT: "PUT",
  DELETE: "DELETE",
};

export {
    
     BASE_URL, TIME_OUT, METHOD };

3. app.ts にリクエストに関する関連する構成とインターセプト操作を記述します。

import axios from "axios";
import {
    
     METHOD, BASE_URL, TIME_OUT } from "./config/api";
import {
    
     message } from "ant-design-vue";

const codeMessage: any = {
    
    
  200: "服务器成功返回请求的数据。",
  201: "新建或修改数据成功。",
  202: "一个请求已经进入后台排队（异步任务）。",
  204: "删除数据成功。",
  400: "发出的请求有错误，服务器没有进行新建或修改数据的操作。",
  401: "用户没有权限（令牌、用户名、密码错误）。",
  403: "用户得到授权，但是访问是被禁止的。",
  404: "发出的请求针对的是不存在的记录，服务器没有进行操作。",
  406: "请求的格式不可得。",
  410: "请求的资源被永久删除，且不会再得到的。",
  422: "当创建一个对象时，发生一个验证错误。",
  500: "服务器发生错误，请检查服务器。",
  502: "网关错误。",
  503: "服务不可用，服务器暂时过载或维护。",
  504: "网关超时。",
  999: "请重新登陆",
};

const instance = axios.create({
    
    
  baseURL: BASE_URL,
  timeout: TIME_OUT,
});

// let loading = null;
// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    
    
    return config;
  },
  function (error) {
    
    
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  async function (response: any) {
    
    
    if (response.status !== 200) {
    
    
      message.error(codeMessage[response.status]);
      return;
    }
    if (!response?.data.data) {
    
    
        message.error(response?.data.message || "服务器异常，请稍后再试");
        return;
    }
    return response?.data;
  },
  function (error) {
    
    
    // 对响应错误做点什么
    message.error(
      codeMessage[error?.response?.status] || "服务器异常，请稍后再试"
    );
    return Promise.reject(error);
  }
);

function GET(url: string, params: any, arg: any) {
    
    
  return instance.get(url, {
    
     params, ...arg });
}
function POST(url: string, params: any) {
    
    
  return instance.post(url, params);
}
function PUT(url: string, params: any) {
    
    
  return instance.put(url, params);
}
function DELETE(url: string, params: any) {
    
    
  return instance.delete(url, params);
}

/**
 *
 * @param url   请求地址
 * @param parmas  请求参数
 * @returns
 */
const request = (url: string, parmas: any) => {
    
    
  switch (parmas.method) {
    
    
    case METHOD.GET:
      return GET(url, parmas.data, parmas);
    case METHOD.POST:
      return POST(url, parmas.data);
    case METHOD.PUT:
      return PUT(url, parmas.data);
    case METHOD.DELETE:
      return DELETE(url, parmas.data);
  }
};
export default request;

4. 最後に、モジュール作成リクエストに従って呼び出します

import request from "../app";
interface props {
    
    
  keyword: string;
}
export async function getLawList(params: props): Promise<any> {
    
    
  return request("/xxx/getList", {
    
    
    method: "POST",
    data: params,
  });
}
export async function getCaseById(params: detailProps): Promise<any> {
    
    
  return request("/xxx/getById", {
    
    
    method: "GET",
    data: params,
  });
}