axios两种封装方式推荐哪种？

  • Z时代
  • 2024-02-27
  • 分类：IT

第一种
main.ts中做声明

import axios from "axios";
axios.defaults.baseURL = import.meta.env.HOST;
axios.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token") as string;
    if (token && config.headers) {
      config.headers["token"] = token;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

api文件中做接口定义

import axios from "axios";
/** 查询列表 */
export const queryList = () => {
  return axios.get("/api/list");
};

第二种
utils中封装axios实例

import axios from "axios";
const request = axios.create({
baseURL : import.meta.env.HOST,
})
request.interceptors.request.use((config) => {
    const token = localStorage.getItem("token") as string;
    if (token && config.headers) {
      config.headers["token"] = token;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  });
export default request;

api中用service请求

import request from './utils';
/** 查询列表 */
export const queryList = () => {
  return request("/api/list");
};

这两种封装方式，都有人用过，哪种好一点？

回答：

推荐第二种
从使用面上看，第一种和第二种一样，实际使用的都是api文件中的函数
而从可维护性，第二种就好太多了，第一种会彻底重写掉axios，如果团队新人开发时，如果需要新调用一个服务，就不太有好。比如说axios中请求返回拦截器对返回值做了处理，如果此时可能需要调用第三方服务，而返回值和默认的返回值不一样，就会比较麻烦。一是开发时，半天不知道为什么解决不了问题。二是好不容易找到了原因，发现改也不好，不改还得研究怎么解决。
而对于第二种，对你而言，你也只是使用api中的函数，无任何影响，对新人而言，不会影响他axios接入新的临时接口等等

回答：

我使用的第一种，这种的缺点就是你想对某一个api做一些特殊处理，基本上都要做全局的兼容，第二种的话可以专门针对某类api再抛出一个axios.create()对象，不会影响别的api，别的api也不用做兼容处理

回答：

我是使用第二种。
话说第一种这样可以使用baseUrl和拦截器么？

回答：

推荐使用第二种

回答：

第二种。方便维护，以后出了比axios更好的库，你只需要修改request就好了，不需要改所有引入axios的地方

回答：

为什么不用alibaba家的 ahook/useRequest呢？

https://github.com/alibaba/hooks

以上是 axios两种封装方式推荐哪种？ 的全部内容， 来源链接： utcz.com/p/932922.html

回到顶部