axios是什么？axios基于业务场景的二次封装详解（示例）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了axios是什么？axios基于业务场景的二次封装详解（示例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5590字，纯文字阅读大概需要8分钟。
内容图文
本篇文章给大家带来的内容是关于axios是什么？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 = []
axios.interceptors.request.use((config) => {
//1.将当前请求的URL添加进请求列表数组
requestList.push(config.url)
//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.请求拦截器中将所有请求的url添加进请求列表变量，为取消请求及loading状态管理做准备
2.请求一旦开始，就可以开启动画加载效果。
3.用户登录后可以在请求头中携带token做权限校验使用
响应拦截器
axios.interceptors.response.use(function (response) {
// 1.将当前请求中请求列表中删除
requestList.splice(requestList.findIndex(item => item === response.config.url), 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 CancelToken = axios.CancelToken
//cancel token列表
let sources = []
const request = function (url, params, config, method) {
return new Promise((resolve, reject) => {
axios[method](url, params, Object.assign({}, config, {
//1.通过将执行程序函数传递给CancelToken构造函数来创建cancel token
cancelToken: new CancelToken(function executor (c) {
//2.将cancel token存入列表
sources.push(c)
})
})).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.router.js
...
import { sources } from '../service/request'
...
router.beforeEach((to, from, next) => {
document.title = to.meta.title || to.name
//路由发生变化时取消当前页面网络请求
sources.forEach(item => {
item()
})
sources.length = 0
next()
})request.js完整代码：
// 引入网络请求库 https://github.com/axios/axios
import axios from 'axios'
import store from '../store'
import router from '../router'
// axios.defaults.timeout = 10000
const requestList = []
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.defaults.baseURL = process.env.BASE_URL
// 自定义拦截器
axios.interceptors.request.use((config) => {
requestList.push(config.url)
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) {
requestList.splice(requestList.findIndex(item => item === response.config.url), 1)
if (requestList.length === 0) {
store.dispatch('changeGlobalState', {loading: false})
}
if (response.data.code === 900401) {
window.$toast.error('认证失效，请重新登录！', 1000)
router.push('/login')
}
return response
}, function (error) {
requestList.length = 0
store.dispatch('changeGlobalState', {loading: false})
if (axios.isCancel(error)) {
throw new axios.Cancel('cancel request')
} else {
window.$toast.error('网络请求失败！', 1000)
}
return Promise.reject(error)
})
const CancelToken = axios.CancelToken
let sources = []
const request = function (url, params, config, method) {
return new Promise((resolve, reject) => {
axios[method](url, params, Object.assign(config, {
cancelToken: new CancelToken(function executor (c) {
sources.push(c)
})
})).then(response => {
resolve(response.data)
}, err => {
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}以上。
以上就是axios是什么？axios基于业务场景的二次封装详解（示例）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的axios是什么？axios基于业务场景的二次封装详解（示例）全部内容，希望文章能够帮你解决axios是什么？axios基于业务场景的二次封装详解（示例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。