第一种
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接入新的临时接口等等