工作中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的二次封装

  axiosAPI 很友好,可以很轻松地在项目中直接使用。不过随着项目规模增大,如果每发起一次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里暂未收到后端回应的请求。
  说到这个问题,就需要讲到axioscancelToken这个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的二次封装基本结束(后续有什么其他设置再来补充)

三、axios的调用方式备忘

作者:爱吃鸡蛋饼原文地址:https://segmentfault.com/a/1190000043855406

%s 个评论

要回复文章请先登录注册