53、axios请求拦截器/响应拦截器

qq_45600165

已于 2025-04-18 11:36:13 修改

阅读量442

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端-面试题文章标签： vue.js

于 2024-12-25 10:53:01 首次发布

本文链接：https://blog.csdn.net/qq_45600165/article/details/144689216

前端-面试题专栏收录该内容

63 篇文章

订阅专栏

一般在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。
1.请求拦截器

在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装；

首先，它可以用于统一处理请求。例如，在发送多个网络请求时，可能需要在每个请求头中添加相同的认证信息（像 token）来验证用户身份。通过请求拦截器，就可以把添加认证信息这个操作集中处理，不用在每个请求代码里单独添加，这样能提高代码的可维护性。

其次，能够进行请求预处理。比如对请求参数进行统一的格式化或者加密处理。假设应用需要对发送的用户数据进行加密，请求拦截器就可以在请求发送前自动完成加密步骤。

再者，有助于进行错误处理和日志记录。可以在拦截器中捕获网络请求开始前的错误，比如网络连接异常或者请求参数不符合要求等情况。同时，也能够记录请求的详细信息，像请求的 URL、参数等内容，方便后续排查问题。

2.响应拦截器

同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等

import axios from "axios";
import router from "路由文件地址"; // 获取路由

const request = axios.create({
	baseURL:"xxx",  
	timeout:20000, 
})

// 请求拦截器
request.interceptors.request.use(
	(config)=>{
		if(config.url !== "/sys/login"){   // 判断请求是否是登录接口
			config.headers.token = sessionStorage.getItem("token"); // 如果不是登录接口，就给请求头里面设置token
		}
		return config; // 返回这个配置对象，如果没有返回，这个请求就不会发送出去
	},
	(error)=>{
		return Promise.reject(error);
	}
)

// 响应拦截器
request.interceptors.response.use(
	(res)=>{
		let code = res.data.code  // 获取后端返回的状态码
		if(code===200){           // 成功
			return res.data.data  // 返回里面的数据，在使用这个axios时，获取到的东西就是这里返回的东西
		}else if (code == 401) {  // token失效
      		router.push("/login");  // 跳转登录页
    	}else{
			return res.data   
		}
	},
	(error)=>{
		return Promise.reject(error);
	}
)

export default request;