vue-resource拦截器interceptors使用

花儿开富贵花

已于 2023-06-07 17:51:55 修改

阅读量499

点赞数

文章标签： vue.js 前端 javascript

于 2022-09-07 13:55:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43843679/article/details/126742789

版权

本文介绍了如何在Vue项目中利用vue-resource的interceptors特性，设置全局的HTTP请求拦截器，以检查并处理token过期情况，避免在每个页面单独添加判断。通过安装vue-resource并配置拦截器函数，实现了高效且统一的错误处理流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目使用vue-resource实现异步加载的过程中，需要在任何一个页面任何一次http请求过程中，增加对token过期的判断，如果token已过期，需要跳转到登录页面。如果要在每个页面中的http请求操作添加一次判断，这个工作量太大，那么需要vue-resource是否存在一个对于任何一次请求响应捕获公共回调函数
vue-resource中interceptors拦截器在每次http请求响应之后，如果设置了拦截器，会优先执行拦截器函数，获取响应体，然后才会决定是否把response返回给then进行接收。
一、安装与引用

// 安装：npm install vue-resource --save-dev
import Vue from 'vue'
// 引入资源请求插件
import VueResource from 'vue-resource'
// 使用VueResource插件
Vue.use(VueResource)

//也可以讲此写为函数，挂在但main.js中
import { modifyRequest } from '@/utils/config'
modifyRequest(Vue)

export function modifyRequest(Vue) {
	Vue.http.interceptors.push((request, next) => {
 		next((response) => {  // 在响应之后传给then之前对response进行修改		和逻辑判断。对于token已过期，就添加在此处。页面中任何一次http请求都会先调用此处方法
 		})
	})
}