axios的请求拦截器和响应拦截器

2023-08-17 14:12| 来源: 网络整理| 查看: 265

目录: 官方文档 www.axios-http.cn/docs/interc… 请求拦截器响应拦截器

1.官方文档

2.请求拦截器:

官方文档代码

// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });

正如代码中所说,在第一个回调函数里面写在发送之前做些什么.

使用场景:比如发送一些请求的时候,需要我们携带请求头参数,如果不使用拦截器,就需要我们每一次请求的时候,都要写相同的请求参数,这样太麻烦了.

形象图:

比如我们在做登录页面的时候,登录成功,需要跳转到主页面,此时我们就可以设置默认的请求头参数,先将token参数存储到本地,在每次提交的时候,只需要从本地获取即可.

将token参数值存储到本地:

const res = await axios({ url: '/login', method: 'POST', data }) // console.log(res.data.token) // const token = res.data.data.token toastBody.innerHTML = res.message localStorage.setItem('token', res.data.token)

然后在公共的js文件中设置如下代码:

axios.interceptors.request.use(config => { config.headers.Authorization = localStorage.getItem('token') return config}, error => Promise.reject(error))

这样的话我们每次触发页面加载事件发请求的时候,就不需要每次都要携带请求头参数了.

document.addEventListener('DOMContentLoaded', async () => { const res = await axios({ url: '/dashboard', // headers: { // Authorization: localStorage.getItem('token') // } }) console.log(res) })

2.响应拦截器

官方文档代码:

axios.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); });

响应拦截器,一般用于网页登录令牌过期的判断

比如当我们登录页面成功,如果过几小时之后,token令牌过期了,这个时候我们就需要重新返回到登录页面,使用场景:处理响应 401 的情况 (token过期-默认2小时),处理 axios 请求结果每次都要取一下 data.

// 响应拦截器(身份过期处理)axios.interceptors.response.use( // 直接拿到数据 res => res.data, // http响应状态码为 2xx 和 3xx 进入第一个函数 error => { // http 响应状态码为 4xx 和5xx, 进入第二个函数 if (error.response.status === 401) { localStorage.clear() location.href = './login.html' } return Promise.reject(error) })

当token令牌过期的时候,就会返回一个错误码401,但是有些时候返回的不一定是401错误码,所以需要做一下判断,当错误码为401的时候,就需要清除本地的数据,localStorage.clear()可以清除本地所有的数据,清除之后在跳转到登录页面(此处我随意用的一个登录页面,实际情况根据开发决定)

回到登录页面和注册页面, 把请求后的响应结果, 少取一次 data, 因为响应拦截器返回的就是 res.data 属性的值(就是后台返回的数据对象) 直接返回到 axios发起的地方了

如果你稍后需要清除拦截器:

const myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);

可以给自定义的 axios 实例添加拦截器

const instance = axios.create(); instance.interceptors.request.use(function () {/*...*/});

总结: 拦截器有什么作用?

对 axios 结果对象进行处理, 把后端返回的真正数据返回到axios调用处使用对响应的错误进行统一处理

【本文地址】

公司简介

联系我们