工作中axios的二次封装与要点备忘
一、axios是什么
axios
是一个轻量的 HTTP客户端。
基于 XMLHttpRequest
服务来执行 HTTP
请求,支持丰富的配置,支持 Promise
,支持浏览器端和 Node.js
端。自Vue2.0
起,尤大宣布取消对 vue-resource
的官方推荐,转而推荐 axios
。现在 axios
已经成为大部分 Vue
开发者的首选。
特性
- 从浏览器中创建
XMLHttpRequests
- 从
node.js
创建http
请求 - 支持
Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换
JSON
数据 - 客户端支持防御
XSRF
二、axios的二次封装
axios
的 API
很友好,可以很轻松地在项目中直接使用。不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作,都需要写一遍。这种重复劳动不仅浪费时间,而且让代码变得冗余不堪,难以维护。为了提高代码质量,我们应该在项目中二次封装一下 axios
再使用。
1.如何封装
封装的同时,你需要和后端协商好一些约定,请求头,状态码,请求超时时间.......
- 设置接口请求前缀:根据开发、测试、生产环境的不同,前缀需要加以区分
- 请求头 : 来实现一些具体的业务,必须携带一些参数才可以请求(例如:会员业务)
- 状态码: 根据接口返回的不同status , 来执行不同的业务,这块需要和后端约定好
- 请求方法:根据get、post等方法进行一个再次封装,使用起来更为方便
- 请求拦截器: 根据请求的请求头设定,来决定哪些请求可以访问
- 响应拦截器: 这块就是根据 后端返回来的状态码判定执行不同业务
axios的常用基本配置项为:
axios({
method: 'get', // post、get、put、delete....
baseURL: '', // 请求的域名,基本地址,公共的路径
url: '', // 请求的路径
params: {}, // get参数会将请求参数拼接在url上
data: {}, // post会将请求参数放在请求体中
headers: {}, // 设置请求头,例如设置token等
timeout: 1000, // 设置请求超时时长,单位:ms
withCredentials:default,//表明了是否是跨域请求、默认是default
maxContentLength:1000//相应内容的最大值
})
在项目中,我是这样二次封装的:
1.在axios.js文件内设置好基础的配置项:
import Vue from "vue";
import axios from "axios";
axios.defaults.timeout = 100000;
axios.defaults.withCredentials = true;
Vue.prototype.$axios = axios;//把axios挂载到vue的原型上供全局调用。
2.如果有生产环境的区分,则可以通过判断node环境变量确定链接请求地址的baseURL
:
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = 'http://prod.xxx.com'
}
3.然后,需要添加请求拦截器和响应拦截器:
a.请求拦截器可以在每个请求里加上token
,或者添加一些其他默认需要发送给后端的基础信息。
以下是请求拦截器的简单用法示例:
// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token
// 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况,此处token一般是用户完成登录后储存到localstorage里的,下面的代码只是一个简单表示
token && (config.headers.Authorization = token)
return config
},
error => {
return Promise.error(error)
})
进阶的做法,就是存储每次发送的请求,拦截取消之前已经发送但是还没收到后端回应的相同请求,或者router
(路由)跳转前清除掉上一个router
里暂未收到后端回应的请求。
说到这个问题,就需要讲到axios
中cancelToken
这个API
,该API
可以获取到当前请求形成取消对应请求的函数,调用后即取消该请求。
对应的代码如下所示:
const CancelToken = axios.CancelToken;
import store from 'store.js'
Vue.$pending = {}
axios.interceptors.request.use((config) => {
let key = config.url + '&' + config.method;//通过对应字段组成可唯一确定取消请求函数的key
removePending(key, true)//删除相同的请求
//
config.cancelToken = new CancelToken(cancelFun => { // cancelFun => 取消函数的形参 实际上对应的是这个取消函数
// 一个请求的取消函数 对应着一次请求
// 执行取消函数 才能取消本次请求 存储本次请求对应的取消函数 保证每次请求是唯一的 这样才能判断是否存在重复请求
Vue.$pending[key] = cancelFun
})
// 添加一些默认的参数,具体视项目决定
addDefaultParams(config.headers, store)
return config
})
addDefaultParams(obj, store){
// 添加一些默认的参数,具体视项目决定
}
function removePending(key, isRequest = false) {
if (Vue.$pending[key]) {
// 当上一次请求未响应式 再一次发送请求时 会把上一次请求中断掉 并把本次自定义错误信息 放入reject(err)中
Vue.$pending[key]()//取消重复的请求,不需要函数参数
delete Vue.$pending[key]//被取消请求后,删除掉该取消函数
}
}
b.响应拦截器可以在接收到响应后先做一层操作,如根据状态码判断登录状态是否需要返回登录页面、授权。
axios.interceptors.response.use(response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
if (response.data.code === 511) {
// 未授权调取授权接口
} else if (response.data.code === 510) {
// 未登录跳转登录页
} else {
return Promise.resolve(response)
}
} else {
return Promise.reject(response)
}
}, error => {
// 我们可以在这里对异常状态作统一处理
if (error.response.status) {
// 处理请求失败的情况
// 对不同返回码对相应处理
return Promise.reject(error.response)
}
})
项目里的响应拦截器代码如下:
axios.interceptors.response.use((response) => {
let key = response.config.url + '&' + response.config.method
removePending函数(key)//删除相同的请求
if (!response) {
return false;
}
if (response.request.responseType === 'blob') {
return response
}
return response.data;
},
(content) => {
if(content?.response?.status==="401"){
checkToken();
}
return Promise.reject(content);
}
);
function checkToken(){
//检查localStorage内是否有tokenId,若没有,则store设置为logout,路由跳转到登录界面
if(!localStorage.getItem("tokenId")){
store.dispatch('logout');
router.push({name: "login"});
}
else{
//若localStorage内有tokenId,则登录状态过期,函数内代码功能可为弹出重新登录小窗口
debounceUnauthorized();
}
}
当需要完成路由跳转前取消重复请求,则在main.js
文件,即router
文件,在其beforeEach
钩子函数内写入removePending
函数来删除请求。
router.beforeEach((to, from, next) => {
for(let key in Vue.$pending){
Vue.$pending[key]();//依次删除pending请求
}
Vue.$pending = {};
..........这下面是你的路由验证代码..........
})
以上是axios
的基本配置,接着,对于项目里每一个包或者模块,都会有自己的axios
请求集合的js
文件。通过上一步把axios
挂载到vue
上,其他js
文件可以通过this.$axios
来调用axios
插件。举个例子如下:
//demo.js
export default{
createPo: (param) => {
return $axios.$post('url', {param});
},
..........文件..........
}
像上面的文件,每隔包或者模块都会有一个对应的文件来存储,可以将他们放置在同一个文件夹内,方便获取。比如说,所有的请求文件都放在同级的modules
文件夹,那获取相关的内容,可以通过以下方式:
import Vue from "vue";
const modulesFiles = require.context("./modules", true, /\.js$/);
const modules = {};
modulesFiles.keys().map((key) => {
const keys = key.replace(/(\.\/|\.js)/g, "");
modules[keys.split("/").pop()] = modulesFiles(key).default;
});
Vue.prototype.$api = modules;
export default {
modules
}
通过以上的设置,在其他vue
文件内就可以通过this.$api.$demo.createPo
直接调用请求函数了。
至此,axios
的二次封装基本结束(后续有什么其他设置再来补充)