VUE的拦截器

简单来说 vue 的拦截器 分为 请求拦截器 和 响应拦截器两种,

使用场景的话就是: 每次都要在请求中加入,token 判断是否登录,如果vue系统中 所有的请求都加入token,比较麻烦,每次送出请求,不过vue给我们 提供了一种方法 ---- 拦截器

拦截器在平时的项目中是比较使用频繁的 可以说在一个项目中 必不可少的

接下来我们说一下 在vue项目中 axios 拦截器的分类

1.请求拦截器

请求拦截器的作用是在请求发送前进进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易

//request拦截器 添加一个请求拦截器  
axios.interceptors.request.use(function (config) {
	let token = window.localStorage.getItem("token")
	if (token) {
  	// 设置请求头
	 config.headers.common['Authorization'] = token
	}
	return config
}, function (error) {
	//如果请求出错在此执行某些操作
	return Promise.reject(error);
});


 

 2.响应拦截器

 响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效需要重新登录的时候,跳转到登录页面

 



// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
	//登录超时
	if(response.data.code==400){
		router.push('/')
	}
	return response;
}, function (error) {
	return Promise.reject(error);
});

 3.移除拦截器

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

4.为axios 实例添加拦截器

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

  • 6
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue拦截器是一种机制,它可以在请求发送或响应返回前对其进行拦截和处理。Vue拦截器通常用于添加或修改请求头、请求参数、响应数据等,以实现一些通用的功能,如统一处理错误信息、添加认证信息等。 在Vue中,可以使用axios拦截器来实现拦截器功能。axios是一个基于Promise的HTTP库,可以用于浏览器和Node.js。axios拦截器有两种类型:请求拦截器和响应拦截器。 请求拦截器可以在发送请求前对其进行拦截和处理,可以通过以下方式使用: ```javascript import axios from 'axios'; // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 config.headers.Authorization = getToken(); // 添加认证信息 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); ``` 响应拦截器可以在接收到响应后对其进行拦截和处理,可以通过以下方式使用: ```javascript import axios from 'axios'; // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response.data; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); ``` 以上代码中,我们使用了axios的interceptors属性来添加拦截器,其中request.use()方法用于添加请求拦截器,response.use()方法用于添加响应拦截器。在拦截器中,我们可以对请求或响应进行一些操作,例如添加请求头、修改请求参数、统一处理错误信息等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值