配置响应拦截器
在案例中后端传输给我的数据包括：响应码（code），响应信息（message） ， 对象
由于我们前端在发送一个请求时，服务端的响应也许会各不相同，我们前端所做出的处理也会不一样。
可是如果在每个事件里都单独将对于这些不同响应的处理都写一遍，代码十分冗余，浪费时间，可读性也不高。
所以：我们要为前端要配置一个响应拦截器，将每一次服务器的响应都拦截下来做一次判断和对应的操作，再将数据传出。
配置请求拦截器
请求拦截器中的token，是后端颁发给我们的通行令牌。用于登录，后来的界面访问权想等等都是有很大作用的。在此案例中，一旦用户合法登录账号，后端的响应里会提供给前端一个 token 令牌。前端为了可以方便的在每一次请求前携带这个令牌，会将 token 存储在sessionStorage 中。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
请求拦截器就是会将每一次请求拦截，判断 sessionStorage 中是否含有 token ， 做出相应的对相应的处理
接下来，就上具体步骤：
1.配置安装’axios’
axios的作用：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。
在终端运行 npm install axios
package.json 目录中会多出：
"dependencies": {
"axios": "^0.21.1",
……
},
2.配置响应拦截器
首先在src目录下建立文件夹，新建api.js文件
目录如下：
在api.js文件里：
1.
首先与要导入’axios‘模块
由于会出现’未登录‘的状态响应码，需要跳转到登陆页面（案例中的路径是’/‘），需要引入router
导入message组件做出消息提示。
2.
api接口的相应会有两种大的情况：前端成功获得了后端的响应；前端没有获得后端的相应。
axios.interceptors.response.use((success) => {} , (error)=>{})
其中， (success)=>{} 中，前端具体提供什么信息，又由后端提供的响应码(code)，来决定。
例：如果前端成功获取后端响应，但是操作违反了后端的业务逻辑，后端会响应500 ， 401 ， 403 这样的响应码。同时前端可以把响应携带的响应信息(message)抛出给用户。
3.
封装请求。使用base ，如果日后url需要加上前缀，可以直接添加设置。
import axios from 'axios'
import { Message } from 'element-ui';
import router from '../router/index'
//请求拦截器
axios.interceptors.request.use((config) => {
//如果存在token，请求携带token
if(window.sessionStorage.getItem('tokenStr')){
config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
}
return config ;
}, (error) => {
Message.error({ message: error });
})
//api接口 响应成功 / 响应失败 【响应拦截器】
//后端提供：响应码，响应信息，对象
axios.interceptors.response.use((success) => {
if (success.status && success.status == 200) {
if (success.data.code == 500 || success.data.code == 401 || success.data.code == 403) { //接口请求成功，业务逻辑错误
Message.error({ message: success.data.message });
return;
}
if (success.data.message) {
Message({ message: success.data.message });
}
}
return success.data;
}, (error) => {
if (error.response.code == 504 || error.response.code == 404) {
Message.error({ message: '服务器被吃了( ╯□╰ )' });
} else if (error.response.code == 403) {
Message.error({ message: '权限不足，请联系管理员' });
} else if (error.response.code == 401) {
Message.error({ message: '请登录账号' });
router.replace('/');
} else {
if (error.response.message) {
Message({ message: error.response.message });
} else {
Message({ message: '该错误触及盲区(●ˇ∀ˇ●)' });
}
}
});
//封装请求
//post请求
let base = '';
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: '${base}${url}',
data: params
})
};
//put请求
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: '${base}${url}',
data: params
})
};
//get请求
export const getRequest = (url, params) => {
return axios({
method: 'get',
url: '${base}${url}',
data: params
})
};
//del请求
export const deleteRequest = (url, params) => {
return axios({
method: 'delete',
url: '${base}${url}',
data: params
})
};
最后不要忘记在入口js文件中引入api.js。
以上，就是我学习配置响应拦截器的全部步骤。
记录下来，希望对大家有帮助哦。
