在日常应用过程中,一个项目中的网络请求会很多,此时一般采取的方案是将网络请求封装起来
在src目录下创建文件夹utils,并创建文件request,用来存储网络请求对象axios
所有安装包都在这个package.json里面可以查看。
在src文件中创建utils文件夹(网络请求的方法),在utils文件夹中在或者创建一个网络请求,可以叫request.js(或者http.js)
在src中在创建api文件夹(网络请求一般都集中放到这里),在新建path.js文件和indes.js文件
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({
timeout: 5000
})
instance.interceptors.request.use(
config => {
if (config.method === "post") {
config.data = qs.stringify(config.data)
}
return config;
},
error => Promise.reject(error)
)
instance.interceptors.response.use(
response => response.status === 200? Promise.resolve(response) : Promise.reject(response),
error => {
const { response } = error;
errorHandle(response.status, response.info)
}
)
export default instance;
在 src 目录下创建文件夹 api,并创建文件 index 和 path 分别用来存放网络请求方法和请求路径。