用Axios Element实现全局的请求loading的方法
背景
业务需求是这样子的，每当发请求到后端时就触发一个全屏的 loading，多个请求合并为一次 loading。
现在项目中用的是 vue 、axios、element等，所以文章主要是讲如果使用 axios 和 element 实现这个功能。
效果如下：
分析
首先，请求开始的时候开始 loading， 然后在请求返回后结束 loading。重点就是要拦截请求和响应。
然后，要解决多个请求合并为一次 loading。
最后，调用element 的 loading 组件即可。
拦截请求和响应
axios 的基本使用方法不赘述。笔者在项目中使用 axios 是以创建实例的方式。
// 创建axios实例
const $ = axios.create({
baseURL: `${URL_PREFIX}`,
timeout: 15000
})
然后再封装 post 请求（以 post 为例）
export default {
post: (url, data, config = { showLoading: true }) => $.post(url, data, config)
}
axios 提供了请求拦截和响应拦截的接口，每次请求都会调用showFullScreenLoading方法，每次响应都会调用tryHideFullScreenLoading()方法
// 请求拦截器
$.interceptors.request.use((config) => {
showFullScreenLoading()
return config
}, (error) => {
return Promise.reject(error)
})
// 响应拦截器
$.interceptors.response.use((response) => {
tryHideFullScreenLoading()
return response
}, (error) => {
return Promise.reject(error)
})
那么showFullScreenLoading tryHideFullScreenLoading()要干的事儿就是将同一时刻的请求合并。声明一个变量needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
startLoading()和endLoading()就是调用 element 的 loading 方法。
import { Loading } from 'element-ui'
let loading
function startLoading() {
loading = Loading.service({
lock: true,
text: '加载中……',
background: 'rgba(0, 0, 0, 0.7)'
})
}
function endLoading() {
loading.close()
}
到这里，基本功能已经实现了。每发一个 post 请求，都会显示全屏 loading。同一时刻的多个请求合并为一次 loading，在所有响应都返回后，结束 loading。
功能增强
实际上，现在的功能还差一点。如果某个请求不需要 loading 呢，那么发请求的时候加个 showLoading： false的参数就好了。在请求拦截和响应拦截时判断下该请求是否需要loading，需要 loading 再去调用showFullScreenLoading()方法即可。
在封装 post 请求时，已经在第三个参数加了 config 对象。config 里包含了 showloading。然后在拦截器中分别处理。
// 请求拦截器
$.interceptors.request.use((config) => {
if (config.showLoading) {
showFullScreenLoading()
}
return config
})
// 响应拦截器
$.interceptors.response.use((response) => {
if (response.config.showLoading) {
tryHideFullScreenLoading()
}
return response
})
我们在调用 axios 时把 config 放在第三个参数中，axios 会直接把 showloading 放在请求拦截器的回调参数里，可以直接使用。在响应拦截器中的回调参数 response 中则是有一个 config 的 key。这个 config 则是和请求拦截器的回调参数 config 一样。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-cli3.0之配置productionGzip方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Vue项目使用localStorage+Vuex保存用户登录信息
这篇文章主要为大家详细介绍了Vue项目使用localStorage+Vuex保存用户登录信息，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了vue如何清除浏览器历史栈，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
element-ui upload组件上传文件类型限制问题小结
最近我遇到这样的问题,接受类型已经加了accept 但是当选择弹出本地选择文件时候切换到所有文件 之前的文件类型就本根过滤不掉了,下面小编给大家介绍element-ui upload组件上传文件类型限制问题小结,感兴趣的朋友一起看看吧2024-02-02
大家应该都知道vue是单向数据流，一般我们也不会在子组件里面修改父组件传进来的值，但总有需要修改的时候，这篇文章主要介绍了vue中修改props传进来的值,需要的朋友可以参考下2022-12-12
今天小编就为大家分享一篇初学vue出现空格警告的原因及其解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
无论是开发新手还是经验丰富的老手，我们都喜欢开源软件包。本文主要介绍了35个最好用的Vue开源库，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要为大家详细介绍了vue实现分割验证码效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,下面这篇文章主要给大家介绍了关于Vue3中ref与reactive的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了vue-router路由懒加载及实现方式,路由懒加载的主要作用是将 路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候，才会加载对应组件的代码块，需要的朋友可以参考下2022-12-12
最新评论