统一的请求数据处理工具
网络请求有很多,但终归是发送和接收,并且axios发送的数据不能是对象,只能是字符串的形式,所以可以使用统一的工具类对axios发送请求的数据进行处理;以此类推,接收返回的请求,可以通过判断不同的状态码,进行不同的处理(500服务器内部错误、404访问地址不存在等)
新建js文件,作为工具,可以放在自建的utils文件夹下
// this.$axios({})
import axios from "axios"
import qs from "querystring"
//对响应状态码的统一处理
const errorHandle = (status, info) => {
switch (status) {
case 400:
console.log("语义有误");
break;
case 401:
console.log("服务器认证失败");
break;
case 403:
console.log("服务器拒绝访问");
break;
case 404:
console.log("地址有误");
break;
case 500:
console.log("服务器遇到意外");
break;
case 502:
console.log("服务器无响应");
break;
default:
console.log(info);
break;
}
}
const instance = axios.create({
//网络请求时间:5秒 超过5秒则请求失败
timeout: 5000
//网路请求公共配置
})
//添加一个请求拦截器
axios.interceptors.request.use(config => {
//在请求之前做一些事
//发送post请求数据的统一处理
if (config.methods === "post") {
config.data = qs.stringify(config.data);
}
return config;
}, err => {
//请求错误的时候做一些事
return Promise.reject(error);
});
//添加一个响应拦截器
axios.interceptors.response.use(response => {
//对返回的数据做一些处理
return response.status === 200 ? Promise.resolve(response) : Promise.reject(response);
}, error => {
//对返回的错误做一些处理
const { response } = error;
errorHandle(response.status,response.info);
// return Promise.reject(error);
});
export default instance;
重点
其他的配置可参考:参考文档
配置请求使用路径
新建如下: index里封装所有的网络请求 path里放所有的路径
测试显示