axios基于常见业务场景的二次封装
axios
axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
在前端框架中的应用也是特别广泛,不管是vue还是react,都有很多项目用axios作为网络请求库。
我在最近的几个项目中都有使用axios,并基于axios根据常见的业务场景封装了一个通用的request服务。
业务场景:
- 全局请求配置。
- get,post,put,delete等请求的promise封装。
- 全局请求状态管理。
- 取消重复请求。
- 路由跳转取消当前页面请求。
- 请求携带token,权限错误统一管理。
默认配置
定义全局的默认配置
axios.defaults.timeout = 10000 //超时取消请求
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.defaults.baseURL = process.env.BASE_URL //挂载在process下的环境常量,在我另一篇文章有详细说明
自定义配置(非常见业务场景,仅作介绍)
// 创建实例时设置配置的默认值
var instance = axios.create({
baseURL: 'https://api.another.com'
});
// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
优先级:自定义配置 > 默认配置
请求及响应拦截器
请求拦截器及取消重复请求
// 请求列表
const requestList = []
// 取消列表
const CancelToken = axios.CancelToken
let sources = {}
axios.interceptors.request.use((config) => {
//将请求地址及参数作为一个完整的请求
const request = JSON.stringify(config.url) + JSON.stringify(config.data)
config.cancelToken = new CancelToken((cancel) => {
sources[request] = cancel
})
//1.判断请求是否已存在请求列表,避免重复请求,将当前请求添加进请求列表数组;
if(requestList.includes(request)){
sources[request]('取消重复请求')
}else{
requestList.push(request)
//2.请求开始,改变loading状态供加载动画使用
store.dispatch('changeGlobalState', {loading: true})
}
//3.从store中获取token并添加到请求头供后端作权限校验
const token = store.getters.userInfo.token
if (token) {
config.headers.token = token
}
return config
}, function (error) {
return Promise.reject(error)
})
1.请求拦截器中将所有请求添加进请求列表变量,为取消请求及loading状态管理做准备;当请求列表已存在当前请求则不响应该请求。
2.请求一旦开始,就可以开启动画加载效果。
3.用户登录后可以在请求头中携带token做权限校验使用。
响应拦截器
axios.interceptors.response.use(function (response) {
// 1.将当前请求中请求列表中删除
const request = JSON.stringify(response.config.url) + JSON.stringify(response.config.data)
requestList.splice(requestList.findIndex(item => item === request), 1)
// 2.当请求列表为空时,更改loading状态
if (requestList.length === 0) {
store.dispatch('changeGlobalState', {loading: false})
}
// 3.统一处理权限认证错误管理
if (response.data.code === 900401) {
window.ELEMENT.Message.error('认证失效,请重新登录!', 1000)
router.push('/login')
}
return response
}, function (error) {
// 4.处理取消请求
if (axios.isCancel(error)) {
requestList.length = 0
store.dispatch('changeGlobalState', {loading: false})
throw new axios.Cancel('cancel request')
} else {
// 5.处理网络请求失败
window.ELEMENT.Message.error('网络请求失败', 1000)
}
return Promise.reject(error)
})
1.响应返回后将相应的请求从请求列表中删除
2.当请求列表为空时,即所有请求结束,加载动画结束
3.权限认证报错统一拦截处理
4.取消请求的处理需要结合其他代码说明
5.由于项目后端并没有采用RESTful风格的接口请求,200以外都归为网络请求失败
promise封装
const request = function (url, params, config, method) {
return new Promise((resolve, reject) => {
axios[method](url, params, Object.assign({}, config)).then(response => {
resolve(response.data)
}, err => {
if (err.Cancel) {
console.log(err)
} else {
reject(err)
}
}).catch(err => {
reject(err)
})
})
}
const post = (url, params, config = {}) => {
return request(url, params, config, 'post')
}
const get = (url, params, config = {}) => {
return request(url, params, config, 'get')
}
//3.导出cancel token列表供全局路由守卫使用
export {sources, post, get}
1.axios cancel token API
2.存入需要取消的请求列表导出给导航守卫使用
3.路由发生变化的时候取消当前页面还没有返回结果的请求,在复杂的页面中请求可能会有很多个,增加取消请求的功能可以让页面切换的时候不卡顿。
/src/router.js
...
import { sources } from '../service/request'
...
router.beforeEach((to, from, next) => {
document.title = to.meta.title || to.name
//路由发生变化时取消当前页面网络请求
Object.keys(sources).forEach(item => {
sources[item]('取消前页面请求')
})
for (var key in sources) {
delete sources[key]
}
next()
})
request.js完整代码:
// 引入网络请求库 https://github.com/axios/axios
import axios from 'axios'
import store from '../store'
import router from '../router'
// 请求列表
const requestList = []
// 取消列表
const CancelToken = axios.CancelToken
let sources = {}
// axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.defaults.baseURL = process.env.BASE_URL
axios.interceptors.request.use((config) => {
const request = JSON.stringify(config.url) + JSON.stringify(config.data)
config.cancelToken = new CancelToken((cancel) => {
sources[request] = cancel
})
if(requestList.includes(request)){
sources[request]('取消重复请求')
}else{
requestList.push(request)
store.dispatch('changeGlobalState', {loading: true})
}
const token = store.getters.userInfo.token
if (token) {
config.headers.token = token
}
return config
}, function (error) {
return Promise.reject(error)
})
axios.interceptors.response.use(function (response) {
const request = JSON.stringify(response.config.url) + JSON.stringify(response.config.data)
requestList.splice(requestList.findIndex(item => item === request), 1)
if (requestList.length === 0) {
store.dispatch('changeGlobalState', {loading: false})
}
if (response.data.code === 900401) {
window.ELEMENT.Message.error('认证失效,请重新登录!', 1000)
router.push('/login')
}
return response
}, function (error) {
if (axios.isCancel(error)) {
requestList.length = 0
store.dispatch('changeGlobalState', {loading: false})
throw new axios.Cancel('cancel request')
} else {
window.ELEMENT.Message.error('网络请求失败', 1000)
}
return Promise.reject(error)
})
const request = function (url, params, config, method) {
return new Promise((resolve, reject) => {
axios[method](url, params, Object.assign({}, config)).then(response => {
resolve(response.data)
}, err => {
if (err.Cancel) {
console.log(err)
} else {
reject(err)
}
}).catch(err => {
reject(err)
})
})
}
const post = (url, params, config = {}) => {
return request(url, params, config, 'post')
}
const get = (url, params, config = {}) => {
return request(url, params, config, 'get')
}
export {sources, post, get}
以上。
来源:https://segmentfault.com/a/1190000016474460
axios基于常见业务场景的二次封装的更多相关文章
- wpf企业级开发中的几种常见业务场景
前阵子在公司弄个内部的进销存管理系统,从了解需求.系统设计到编码,大约耗费了两个月时间,后来公司有了其他的安排,这东西就算黄了.顺便吐槽一下,厂里的一些人说话真心不顾别人感受,邮件啥的没一句舒服的.不 ...
- android基于开源网络框架asychhttpclient,二次封装为通用网络请求组件
网络请求是全部App都不可缺少的功能,假设每次开发都重写一次网络请求或者将曾经的代码拷贝到新的App中,不是非常合理,出于此目的,我希望将整个网络请求框架独立出来,与业务逻辑分隔开,这样就能够避免每次 ...
- 基于bootstrap table配置的二次封装
准备 jQuery js css 引用完毕 开始 如果对bootstrap table 的方法与事件不熟悉: Bootstrap table方法,Bootstrap table事件 <table ...
- Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)
在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...
- Redis常见业务场景应用
一定时间范围内不可重复发短信问题 Redis实现消息队列 Redis实现Session共享 ...
- 基于bootstrap模态框的二次封装
一.参数设置 $.beamDialog(options); var defaults = { title:'标题', content:'内容', showCloseButton:true, //显示关 ...
- 基于ant design form的二次封装
// standardForm.js import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; ...
- python+selenium十:基于原生selenium的二次封装
from selenium import webdriverfrom selenium.webdriver.support.wait import WebDriverWaitfrom selenium ...
- element el-table表格的vue组件二次封装(附表格高度自适应)
基于vue的el-table表格二次封装组件方法 前言 在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多 ...
随机推荐
- 基于注解的 Spring MVC(上)
什么是Spring MVC Spring MVC框架是一个MVC框架,通过实现Model-View-Controller模式来很好地将数据.业务与展现进行分离.从这样一个角度来说,Spring MVC ...
- NVMe与SCM结合将赋予存储介质的能力
转自:SCM是什么鬼,NVMe与其结合将赋予存储介质哪些能力? 全SSD闪存阵列在企业级存储得到广泛应用,相比传统机械硬盘,它的延迟.性能和可靠性都有了显著提高.许多早期开发商抓住其闪存技术优势的机遇 ...
- Security arrangements for extended USB protocol stack of a USB host system
Security arrangements for a universal serial bus (USB) protocol stack of a USB host system are provi ...
- linux的sar命令未找到
linux的sar命令未找到 一般的命令可以直接使用yum安装,但是sar和mpstat命令这两个命令都是在sysstat包里, 网上的解决方法:rpm -ivh gd-2.0.32-23.2.i58 ...
- sql 注入 及 in 注入
原文地址: http://www.cnblogs.com/lzrabbit/archive/2012/04/22/2465313.html 除了校验参数内容,过滤长度和sql关键字. 解决in条件拼接 ...
- SQL自动生成A到Z二十六个英文字母
if object_id('#tempdriveinfo') is not null drop table #tempdriveinfo create table #tempdriveinfo ( [ ...
- (2)git本地生成SSH关联github
1.安装git 2.打开 Git Bash 输入ssh ,查看是否安装了ssh 这个界面是安装了的意思 3.生成ssh 输入ssh-keygen -t rsa 指令, 再连续按三次回车 会生成两个文件 ...
- ubuntu安装软件或upgrade出现 You might want to run 'apt-get -f install' to correct these
今天在ubuntu下安装任何软件都提示以下错误: You might want to run 'apt-get -f install' to correct these:The following p ...
- Spark学习(四)Spark2.3 HA集群的分布式安装
一.下载Spark安装包 1.从官网下载 http://spark.apache.org/downloads.html 2.从微软的镜像站下载 http://mirrors.hust.edu.cn/a ...
- Spring的依赖注入概述
以下内容引用自http://wiki.jikexueyuan.com/project/spring/dependency-injection.html: 每个基于Java应用程序都有几个对象,这些对象 ...