目录
写在前面
有时候我们希望axios请求实现一些统一的功能,比如携带用户信息,统一的消息处理等,这时候就可以使用axios拦截器在请求发出前和接收到反馈消息后做一些统一的处理。
封装
import axios from "axios";
let backURL1: string = "http://192.168.1.100:8080";
let backURL2: string = "http://192.168.1.200:8020";
const createService = (baseURL: string | undefined, isJsonQuest: boolean) => {
// 基础配置
const _axios = axios.create({
timeout: 5 * 60 * 1000,
baseURL,
});
// 请求发送前执行
_axios.interceptors.request.use(
(request: any): object => {
request.headers["userId"] = 1;
request.headers["account"] = "user";
if (isJsonQuest) request.data = JSON.stringify(request.data); // 转为formdata数据格式
return request;
},
(error) => {
return Promise.reject(error); // 转到具体实现中的catch
}
);
// 接收到结果后执行
// 假设后端返回的内容格式如下: { 'status': '0'; 'msg': 'success'; 'info': 'data id: 1' }
_axios.interceptors.response.use(
(response: any): object => {
if (response.data["status"] === 0)
return response; // 转到具体实现中的then
else {
console.log(response.data["msg"] + response.data["info"])
return Promise.reject(response); // 转到具体实现中的catch
}
},
(error) => {
return Promise.reject(error); // 转到具体实现中的catch
}
);
return _axios;
};
export { backURL1, backURL2 }
export const backURL1JSON = createService(backURL1, true);
export const backURL1FORM = createService(backURL1, false);
export const backURL2JSON = createService(backURL2, true);
export const backURL2FORM = createService(backURL2, false);
使用
import { baseURL1JSON } from "@/utils/axiosInterceptor.ts"
function Test(): void {
let form = new FormData();
form.append("mission_id", "100");
baseURL1JSON.post("/getData", form).then((response) => {
console.log('getData success');
})
.catch((error) => {
console.log(error);
});
}