封装一个axios request请求的（通用）方法

最新推荐文章于 2024-08-01 15:32:21 发布

前端加油站

最新推荐文章于 2024-08-01 15:32:21 发布

阅读量399

点赞数

分类专栏：工具类文章标签： aios request

本文链接：https://blog.csdn.net/Gas_station/article/details/131003429

版权

工具类专栏收录该内容

15 篇文章 0 订阅

订阅专栏

该文介绍了如何组织和配置一个基于Axios的HTTP请求库，包括创建services文件夹、配置API常量、设置请求和响应拦截器，以及按模块创建请求调用的方法。文中还涉及到错误处理和AntDesignVue的message组件。

摘要由CSDN通过智能技术生成

如果可以实现记得点赞分享，谢谢老铁～

1.首先创建一个services 文件夹

里面新建一个命名为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,
  });
}