axios的二次封装
1.1创建一个serverConfig.js文字，作为axios二次封装的配置文件
let baseURL = ""
switch (process.env.NODE_ENV) {
//可以在根目录的 package.json 配置 NODE_ENV
case 'production':
baseURL = "生产环境地址"
break;
case 'test':
baseURL = "测试环境地址"
default:
baseURL = "开发环境地址";
}
const serverConfig = {
baseURL:"baseURL", // 请求基础地址,可根据环境自定义
useTokenAuthorization: true, // 是否开启 token 认证
};
export default serverConfig;
axios更多配置选项可以参考官方文档：www.axios-js.com/zh-cn/docs/…
1.2创建axios实例，并引入相关文件，后续需要
//index.js
import axios from "axios";
import serverConfig from "./config/serverConfig"; //引入配置项文件
import qs from "qs";//可以对post请求传参进行序列化处理
// 创建 axios 请求实例
const serviceAxios = axios.create({
baseURL: serverConfig.baseURL, // 基础请求地址
timeout: 10000, // 请求超时设置
withCredentials: false, // 跨域请求是否需要携带 cookie
});
1.3设置请求拦截
//index.js
// 创建请求拦截
serviceAxios.interceptors.request.use(
(config) => {
// 如果开启 token 认证
if (serverConfig.useTokenAuthorization) {
config.headers["Authorization"] = localStorage.getItem("token"); // 请求头携带 token
}
// 设置请求头
if (!config.headers["content-type"]) { // 如果没有设置请求头
if (config.method === 'post') {
config.headers["content-type"] = "application/x-www-form-urlencoded"; // post 请求
config.data = qs.stringify(config.data); // 序列化,比如表单数据
console.log(config.data);
} else {
config.headers["content-type"] = "application/json"; // 默认类型
}
}
console.log("请求配置", config);
return config;
},
(error) => {
Promise.reject(error);
}
);
这里补充说明一下：
POST请求参数序列化
在POST请求中的 Content-Type 常见的有以下3种形式：
- Content-Type: application/json
- Content-Type: application/x-www-form-urlencoded
- Content-Type: multipart/form-data
现在主流基本在用application/json形式，Axios默认以这种形式工作，我们给后端接口传递参数也简单，直接丢在其data参数就行了。
但是有时候后端要求Content-Type必须以application/x-www-form-urlencoded形式，那么通过上面传递的参数，后端是收不到的，我们必须对参数数据进行所谓的序列化处理才行，让它以普通表单形式(键值对)发送到后端，而不是json形式
1.4.设置响应拦截
//index.js
//响应失败时返回的参数处理
const messageMap = {
302:"接口重定向了！",
400:"请求参数错误！",
401: "您未登录，或者登录已经超时，请先登录！",
403:"您没有权限访问该资源！",
404:"您访问的资源不存在！",
500:"服务器内部错误！",
502:"网关错误！",
504:"网关超时！",
default: "异常问题，请联系管理员！"
}
// 创建响应拦截
serviceAxios.interceptors.response.use(
//响应成功
(res) => {
let data = res.data;
// 处理自己的业务逻辑，比如判断 token 是否过期等等
return data;
},
//响应失败
(error) => {
if (error && error.response) {
//使用key:value的形式
return messageMap[error.response.status] || "default"
}
//服务器连结果都没有返回
if (!window.navigator.onLine) {
//断网处理：跳转断网页面/提示网络错误等等
return;
}
}
);
1.5接口调用示例
import serviceAxios from "../index"; //引入上面的index.js文件
//get请求
export const getTest = (params) => {
return serviceAxios({
url: "/test",
method: "get",
params,
});
};
//post请求
export const postTest1 = (data) => {
return serviceAxios({
url: "/test1",
method: "post",
data
});
};
//其他请求方法
这里借鉴了两位前辈的文章，写的都很好！
最后附上github地址：github.com/mengliren66…
