ajax代码复用,ajax配置

## 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));

})

...

~~~