请求拦截器request

请求拦截器request

import axios, { AxiosInstance } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import qs from 'qs';
import { Session } from '/@/utils/storage';

// 配置新建一个 axios 实例
const service: AxiosInstance = axios.create({
	baseURL: import.meta.env.VITE_API_URL,
	timeout: 50000,
	headers: { 'Content-Type': 'application/json' },
	paramsSerializer: {
		serialize(params) {
			return qs.stringify(params, { allowDots: true });
		},
	},
});

// 添加请求拦截器
service.interceptors.request.use(
	(config) => {
		// 在发送请求之前做些什么 token
		if (Session.get('token')) {
			config.headers!['Authorization'] = `${Session.get('token')}`;
		}
		return config;
	},
	(error) => {
		// 对请求错误做些什么
		return Promise.reject(error);
	}
);

// 添加响应拦截器
service.interceptors.response.use(
	(response) => {
		// 对响应数据做点什么
		const res = response.data;
		if (res.code && res.code !== 200 && res.code !== 500) {
			// `token` 过期或者账号已在别处登录
			if (res.code === 401 || res.code === 4001) {
				Session.clear(); // 清除浏览器全部临时缓存
				window.location.href = '/'; // 去登录页
				ElMessageBox.alert('你已被登出,请重新登录', '提示', {})
					.then(() => {})
					.catch(() => {});
			}
			return Promise.reject(service.interceptors.response);
		} else {
			return res;
		}
	},
	(error) => {
		// 对响应错误做点什么
		if (error.message.indexOf('timeout') != -1) {
			ElMessage.error('网络超时');
		} else if (error.message == 'Network Error') {
			ElMessage.error('网络连接错误');
		} else {
			if (error.response.data) ElMessage.error(error.response.statusText);
			else ElMessage.error('接口路径找不到');
		}
		return Promise.reject(error);
	}
);

// 导出 axios 实例
export default service;

<think>好的,用户想了解如何在前端使用Axios实现请求拦截器的教程、示例和用法。首先,我需要整理一下Axios的基本概念和拦截器的作用。Axios是一个基于Promise的HTTP客户端,广泛用于前端项目中。请求拦截器可以在发送请求之前对配置进行处理,比如添加统一的请求头、身份验证Token或者修改请求参数。 接下来,我需要参考用户提供的引用内容。引用[2]提到使用请求拦截器统一携带Token,并简要说明了拦截器的用途。引用[3]详细说明了请求拦截器和响应拦截器的定义和作用,可以从中提取关键步骤。引用[4]则提到Vue中推荐使用Axios,所以可能需要考虑在Vue项目中的配置方式。 然后,我需要确定回答的结构。根据用户的要求,回答需要结构清晰,逐步解决问题。可能需要分步骤讲解,包括安装Axios、创建实例、添加拦截器、示例代码以及处理错误等。同时,要确保所有数学表达式和代码块格式正确,但根据用户问题,这里可能主要涉及代码示例,所以需要特别注意代码的格式和注释。 用户可能需要具体的示例代码,所以应该提供完整的代码片段,比如如何创建Axios实例,如何使用拦截器添加Token,如何处理错误等。同时,要提到最佳实践,比如在Vue中的使用,以及如何结合响应拦截器统一处理错误。 还需要注意引用标识的正确添加。比如在提到添加请求头时,引用[1]中的步骤可能相关,但根据用户提供的引用内容,引用[2]、[3]、[4]更直接相关,所以需要正确标注。 最后,生成相关问题,可能涉及拦截器的其他应用场景、错误处理、与响应拦截器的配合使用,以及如何测试拦截器是否生效。这些问题需要与用户的问题紧密相关,并且能够引导进一步学习。</think>### Axios请求拦截器实现教程 #### 一、Axios拦截器核心原理 Axios拦截器通过Promise链式调用机制,在请求发出前和响应接收后插入处理逻辑。请求拦截器接收`config`对象,可修改请求参数、添加公共头信息或Token认证[^2][^3]。 #### 二、具体实现步骤 1. **安装Axios** ```bash npm install axios ``` 2. **创建Axios实例** ```javascript // src/utils/request.js import axios from 'axios' const service = axios.create({ baseURL: 'https://api.example.com', timeout: 5000 }) ``` 3. **添加请求拦截器** ```javascript service.interceptors.request.use( config => { // 注入Token(示例) const token = localStorage.getItem('ACCESS_TOKEN') if (token) { config.headers.Authorization = `Bearer ${token}` } // 统一添加时间戳 config.params = { ...config.params, _t: Date.now() } return config }, error => { return Promise.reject(error) } ) ``` 4. **响应拦截器配合使用** ```javascript service.interceptors.response.use( response => { // 统一处理响应数据 return response.data }, error => { // 处理401未授权错误 if (error.response.status === 401) { router.push('/login') } return Promise.reject(error) } ) ``` 5. **导出实例** ```javascript export default service ``` #### 三、实际使用示例 ```javascript import request from '@/utils/request' // 发送带拦截器请求 request.get('/user/info') .then(data => console.log(data)) .catch(err => console.error('请求失败:', err)) ``` #### 四、最佳实践建议 1. **环境区分**:通过`process.env.NODE_ENV`动态设置baseURL 2. **安全处理**:在拦截器中过滤敏感参数 3. **性能优化**:添加请求取消功能 4. **类型提示**:为拦截器添加TypeScript类型定义
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值