为什么拦截器把正常请求也拦截了_Spring Boot + Vue 前后端分离开发，前端网络请求封装与配置...

前端网络访问，主流方案就是 Ajax，Vue 也不例外，在 Vue2.0 之前，网络访问较多的采用 vue-resources，Vue2.0 之后，官方不再建议使用 vue-resources ，这个项目本身也停止维护，目前建议使用的方案是 axios。今天松哥就带大家来看看 axios 的使用。

axios 引入

axios 使用步骤很简单，首先在前端项目中，引入 axios：

npm install axios -S

装好之后，按理说可以直接使用了，但是，一般在生产环境中，我们都需要对网络请求进行封装。

因为网络请求可能会出错，这些错误有的是代码错误导致的，也有的是业务错误，不管是哪一种错误，都需要开发者去处理，而我们不可能在每一次发送请求时都去枚举各种错误情况。

因此我们需要对前端请求进行封装，封装完成后，将前端错误统一处理，这样，开发者只需要在每一次发送请求的地方处理请求成功的情况即可。

请求封装

在 axios 中，我们可以使用 axios 自带的拦截器来实现对错误的统一处理。

在 axios 中，有请求拦截器，也有响应拦截器。

请求拦截器中可以统一添加公共的请求参数，例如单点登录中前端统一添加 token 参数。

响应拦截器则可以实现对错误的统一处理。

另外一个需要注意的地方则是错误的展示需要使用一种通用的方式，而不可以和页面绑定(例如，登录失败，在用户名/密码输入框后面展示错误信息，不支持这种错误显示方式)，这里推荐使用 ElementUI 中的 Massage 来展示错误信息，这是一个页面无关的组件。

封装后的 axios 如下：

import axios from 'axios'

import {Message} from 'element-ui'

axios.interceptors.request.use(config => {

return config;

}, err => {

Message.error({message: '请求超时!'});

})

axios.interceptors.response.use(data => {

if (data.status && data.status == 200 && data.data.status == 500) {

Message.error({message: data.data.msg});

return;

}

if (data.data.msg) {

Message.success({message: data.data.msg});

}

return data.data;

}, err => {

if (err.response.status == 504 || err.response.status == 404) {

Message.error({message: '服务器被吃了⊙﹏⊙∥'});

} else if (err.response.status == 403) {

Message.error({message: '权限不足,请联系管理员!'});

} else if (err.response.status == 401) {

Message.error({message: err.response.data.msg});

} else {

if (err.response.data.msg) {

Message.error({message: err.response.data.msg});

}else{

Message.error({message: '未知错误!'});

}

}

})

代码解释：

首先导入 axios 和 Massage 组件

接下来定义一个请求拦截器

最后定义一个响应拦截器，这个拦截器有两个参数，第一个参数 data 表示服务端处理成功的响应，第二个 err 表示服务端处理失败的响应。对照着 jQuery 中的 Ajax ，第一个相当于 success 回调，第二个相当于 error 回调。

响应的 data 表示服务端返回的数据，数据格式是 {data:{status:200,msg