配置响应拦截器
在案例中后端传输给我的数据包括:响应码(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。
以上,就是我学习配置响应拦截器的全部步骤。
记录下来,希望对大家有帮助哦。