用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 相关文章推荐
js脚本获取webform服务器控件的方法
May 16 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
微信小程序实现日历签到
Sep 21 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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
杏林同学录(六)
2006/10/09 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
python修改字典内key对应值的方法
2015/07/11 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python 发送邮件方法总结
2020/08/10 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
Python如何批量生成和调用变量
2020/11/21 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
渔夫的故事教学反思
2014/02/14 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
开场白怎么写
2015/06/01 职场文书
地道战观后感400字
2015/06/04 职场文书
黄河绝恋观后感
2015/06/08 职场文书
导游词之舟山普陀山
2019/11/06 职场文书