【Web系列二十二】Vue+Ts下实现axios拦截器_vue3+vite+ts+axios的路由拦截器

目录

写在前面

封装

使用

写在前面

        有时候我们希望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);
    });
}