## ajax配置
项目采用了前后端分离,采用ajax发送json的数据格式和服务器交互,因此在ajax也要配置一些全局配置(项目采用了axios框架),全局配置如下
1. 发送ajax的等待进度条
2. 全局status错误日志的处理和提示
3. 请求中区分是否携带token
4. 发送数据是否需要表单序列化
axios有2大部分拦截器
* request发送数据之前拦截器
~~~
...
NProgress.start() // start progress bar
const isToken = (config.data || {}).isToken === false
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
}
//headers中配置serialize为true开启序列化
if (config.methods === 'post' && config.headers.serialize) {
config.data = serialize(config.data);
delete config.data.serialize;
}
return config
}, error => {
return Promise.reject(error)
});
...
~~~
* response收到数据之后的拦截器
~~~
...
axios.interceptors.response.use(res => {
NProgress.done();
const status = Number(res.status) || 200;
const statusWhiteList = website.statusWhiteList || [];
const message = res.data.message || '未知错误';
//如果请求为200则放过,否者默认统一处理,或者在website中配置statusWhiteList白名单自行处理
if (status !== 200 && !statusWhiteList.includes(status)) {
Message({
message: message,
type: 'error'
})
return Promise.reject(new Error(message))
}
return res;
}, error => {
NProgress.done();
return Promise.reject(new Error(error));
})
...
~~~