如何详细使用vue-resource拦截器interceptors？

本文共计1062个文字，预计阅读时间需要5分钟。

前言 + 拦截器-interceptor + 在现代的前端框架上，拦截器基本上是一个基础但非常重要的环节。例如，Angular 原生就支持拦截器配置，VUE 的 Axios 模块也为我们提供了拦截器配置。那么，拦截器最终是什么呢？

前言

拦截器-interceptor

在现代的一些前端框架上，拦截器基本上是很基础但很重要的一环，比如Angular原生就支持拦截器配置，VUE的Axios模块也给我们提供了拦截器配置，那么拦截器到底是什么，它有什么用？

拦截器能帮助我们解决的

• 添加统一的request的参数
• 比如header中加入X-Requested-With，比如客户端需要实现sign和token的验证机制，比如你可以写$www.xxxx.com/1/files 这样的请求地址
• 处理统一的responseError
• 比如重连机制，拿到error.code错误码重连，比如token过期，重新拿到token再次send request
• 比如统一报错信息，给所有返回的404来个提示也会很酷

在vue项目使用vue-resource实现异步加载的过程中，需要在任何一个页面任何一次http请求过程中，增加对token过期的判断，如果token已过期，需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断，那将会是一个非常大的修改工作量。