今天童鞋问问axios怎么封装,我把自己封装的给贴上来。其中也有参考百度的。
我习惯在src目录下创建一个libs文件,然后在libs文件下创建axios.js.
// axios.js
import axios from "axios";
import { message } from "ant-design-vue"; // 这里是引用了一个公共的弹框
class HttpRequest {
constructor(baseUrl = baseURL) {
this.baseUrl = baseUrl;
this.queue = {};
}
getInsideConfig() {
return {
baseURL: this.baseUrl
};
}
destroy(url) {
delete this.queue[url];
if (!Object.keys(this.queue).length) {
// Spin.hide()
}
}
interceptors(instance, url) {
// 请求拦截
instance.interceptors.request.use(
config => {
// 添加全局的loading...
if (!Object.keys(this.queue).length) {
// Spin.show() // 不建议开启,因为界面不友好
}
this.queue[url] = true;
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截
instance.interceptors.response.use(
res => {
this.destroy(url);
const { data, status } = res;
return { data, status };
},
error => {
this.destroy(url);
let errorInfo = error.response;
if (!errorInfo) {
const {
request: { statusText, status },
config
} = JSON.parse(JSON.stringify(error));
errorInfo = {
statusText,
status,
request: { responseURL: config.url }
};
}
this.addErrorLog(errorInfo);
return Promise.reject(error);
}
);
}
addErrorLog(err) {
// console.log(err);
const { status } = err;
switch (status) {
case 510:
// console.log(message);
message.error("登录失效,请重新登录");
break;
case 500:
message.error(err.data);
break;
case 404:
err.data.message === "No message available"
? message.error("请求错误")
: message.error(err.data.message);
break;
default:
message.error(err.data);
}
}
request(options) {
const instance = axios.create();
options = Object.assign(this.getInsideConfig(options), options);
this.interceptors(instance, options.url);
return instance(options);
}
}
export default HttpRequest;
然后在axios.js 同级 创建api.request.js
// api.request.js
import HttpRequest from "./axios";
// 这里写的是请求路径的ip或者域名
const baseUrl =
process.env.NODE_ENV === "development"
? "" : window.location.origin + window.location.pathname;
const axios = new HttpRequest(baseUrl);
export default axios;
以上就是 axios 的封装了。接下来看一下是怎么使用的
libs 文件同级创建api文件夹,api下放置各个模块的接口js文件,直接看文件内如何使用
import axios from "@/libs/api.request";
export const centerMesList = () => {
return axios.request({
url: "api/v1/board/getMesList",
methods: "get"
});
};
然后在调用接口的页面直接引用
import { centerMesList, centerOeeList } from "@/api/board";
// 写到方法中
centerMesList().then(res => {
const { status, data } = res;
if (status === 200) {
const { code, error, result } = data;
if (code === 200) {
} else {
this.$message.error(error);
}
} else {
this.$message.error("请求异常");
}
});