用Axios Element实现全局的请求loading的方法


Posted in Javascript onMarch 15, 2018

背景

业务需求是这样子的,每当发请求到后端时就触发一个全屏的 loading,多个请求合并为一次 loading。

现在项目中用的是 vue 、axios、element等,所以文章主要是讲如果使用 axios 和 element 实现这个功能。

效果如下:

用Axios Element实现全局的请求loading的方法

分析

首先,请求开始的时候开始 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 一样。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
基于IView中on-change属性的使用详解
Mar 15 #Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 #Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 #Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 #Javascript
微信小程序实现换肤功能
Mar 14 #Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 #Javascript
iview table高度动态设置方法
Mar 14 #Javascript
You might like
zend framework多模块多布局配置
2011/02/26 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
js将json格式内容转换成对象的方法
2013/11/01 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
Python中的jquery PyQuery库使用小结
2014/05/13 Python
python中的五种异常处理机制介绍
2014/09/02 Python
Python使用turtule画五角星的方法
2015/07/09 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
Python实现手势识别
2020/10/21 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
什么是Remote Module
2016/06/10 面试题
中学生校园广播稿
2014/01/16 职场文书
装饰活动策划方案
2014/02/11 职场文书
女生抽烟检讨书
2014/10/05 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
解除同居协议书
2015/01/29 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
golang中的空slice案例
2021/04/27 Golang
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
基于Python实现股票收益率分析
2022/04/02 Python