npm install axios
axios 依赖原生的 ES6 Promise 实现
// 全局的 axios 默认值
import { baseURL } from './common.js' //接口域名引入
axios.defaults.baseURL = baseURL;
axios.defaults.timeout = 10000; //超时毫秒 60s
// 请求拦截器
axios.interceptors.request.use(
config =>{
// 在发送请求之前做些什么:headers添加token
config.headers['token'] = 'c5d1b483-18c8-4690-b829-48b8f525f527';
loading
Toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
mask: false, // 是否显示遮罩层
message: '数据加载中...',
});
// 特定接口不显示数据加载中提示
// if (config.url.includes('/api/mobile/index.php?w=member_favorites&t=favorites_add')) {
// // 清除加载动画
// Toast.clear();
// } else {
// Toast.loading({
// duration: 0, // 持续展示 toast
// forbidClick: true, // 禁用背景点击
// mask: false, // 是否显示遮罩层
// message: '数据加载中...',
// });
// }
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
)
// 响应拦截器
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
if (error.response.status) {
switch (error.response.status) {
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
case 500:
Toast({
message: '内部服务器错误',
duration: 1500,
forbidClick: true
});
break;
// 其他错误,直接抛出错误提示
default:
Toast({
message: error.response.data.msg,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
);
// 如果想在稍后移除拦截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);