请选择 进入手机版 | 继续访问电脑版

vue + axios + element-ui 实现全局Loading(部分接口不要loading,多个请求

[复制链接]
谭先生 发表于 2021-1-1 18:34:44 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
vue + axios + element-ui 实现全局Loading(部门接口不要loading,多个请求合并一个loading)


  • loading.js
  1. import { Loading } from 'element-ui'let needLoadingRequestCount = 0let loadingconst startLoading = () => {  loading = Loading.service({    lock: true,    text: '冒死加载中...', //可以自界说文字    spinner: 'el-icon-loading', //自界说加载图标类名    background: 'rgba(0, 0, 0, .3)' //遮罩层背景色  })}function endLoading() {  Vue.nextTick(function() {    // DOM 更新了    loading.close()  })}export const showLoading = () => {  if (needLoadingRequestCount === 0) {    startLoading()  }  needLoadingRequestCount++}export const hideLoading = () => {  setTimeout(tryCloseLoading, 300)}function tryCloseLoading() {  if (needLoadingRequestCount  {    // 这里是加loading的地方    if (config.config.showLoading === true) {      showLoading()    }    //..... 其他代码   },  error => {    hideLoading()    return Promise.reject(error)  }  )  // 响应拦截axios.interceptors.response.use(  res => {    hideLoading()   //..... 其他代码   },  error => {    hideLoading()    //..... 其他代码   })//* 封装post请求 (默认都加上loading)export function post(url, data = {}, config = { showLoading: true }) {  return new Promise((resolve, reject) => {    axios({      url,      method: 'post',      data,      config    }).then(      response => {        resolve(response.data)      },      err => {        reject(err)      }    )  })}
复制代码

  • 当请求不想要带loading时:


来源:https://blog.csdn.net/qq_41287158/article/details/111872557
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )