1 前景介绍
根据Axios中文文档:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。因其实在是过于简单粗暴,好用的一逼,可以算是目前最流行的前后端数据交互的工具,前端人员基本上每天都在接触它。为达到体感更佳的使用效果,一般不会直接原生使用(当然你硬要原生使用也可以),一般需要做几个简单的二次封装动作。本文旨在通过在vue项目中对axios的二次封装使用做一个笔记,分享一下aiox封装中需要关注的几个点。
项目代码文件夹大概如下:
需要本文前需要说明的是:
- http文件夹下的
index.js
文件是对axios
封装的文件(本文重点关注讨论这个文件),api文件夹下的文件是使用http接口定义的文件,userStorage.js
是跟token和用户信息缓存相关的工具文件。- 本项目用的是
vant
UI框架,所以,跟UI相关的(比如Toast
),都是导入vant
中的,实际可根据具体使用UI框架替换就好(比如用的antd
)。- 虽然是vue项目中封装,但是react项目同理。
2 创建axios实例
创建一个axios实例非常简单,调用create()
方法就好了:
const http = axios.create({
//withCredentials: true, //表示跨域请求时是否需要使用凭证,可根据情况自己设定,我这儿用不上
timeout: 30000, //设置请求超时时间,单位:ms
//baseURL:'' //http请求域名,也可以在请求拦截器里面设置
});
3 请求拦截器封装
在我看来,请求拦截器的作用主要有两个:
1、对HTTP请求的Request Headers参数进行全局设置
2、设置接口请求的域名和接口路径,也就是baseURL和url
其实现代码片段如下:
http.interceptors.request.use(
(config) => {
// config中包含url就是后端给的接口路径
let { url } = config;
// 此处我的开发环境中因为使用了webpack的devServer代理,所以接口域名为空
let baseURL = '';
// 生产环境(build之后)的域名是直接从浏览器地址栏截取的
// 所以做出以下判断,可根据实际情况自行判断不同环境的域名
const isProd = process.env.NODE_ENV === 'production';
if (isProd) {
baseURL = `${document.location.protocol}//${document.location.host}/app`;
}
config = {
...config,
baseURL: baseURL,
url: url,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
...config.headers,
accessToken: UserStorage.getUaaTokenInfo().accessToken || '', //从缓存中取出登录获取的token
authType: 'account',
},
};
return config;
},
(error) => {
return Promise.reject(error);
}
);
最终在network中看到的Request Headers效果如下:
4 响应拦截器封装
响应拦截器的作用主要是以下两点
1、统一处理接口请求返回数据的后,再返回具体给业务层使用
2、统一处理接口异常状态码情况,统一显示错误信息
必须说明的是,这块处理的逻辑其实比较灵活,具体要看接口返回的数据是什么格式,根据具体情况来处理,