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

第一种
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");
};

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

阅读 2.8k
6 个回答
✓ 已被采纳

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

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

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

新手上路,请多包涵

推荐使用第二种

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题