用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插件之自动添加删除行的实现
Oct 13 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 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
Dedecms常用函数解析
2008/02/01 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
使用php清除bom示例
2014/03/03 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python打印斐波拉契数列实例
2015/07/07 Python
python监控文件或目录变化
2016/06/07 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
金融事务专业求职信
2014/04/25 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
违纪检讨书
2015/01/27 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
盲山观后感
2015/06/11 职场文书