项目实用功能-全局loading动画

1.为设么要使用全局loading

调用的每一个接口都要绑定一个loading真的很烦。

2.实现这个需要考虑哪些要素

  • 首先全局的loading需要一个调用任何接口都要执行的地方打开,那就肯定是axios的前置拦截函数了。
  • loading有加载整个页面的,也有加载部分页面的(下拉框内容展示区等),所以不是所有接口都能使用全局loading,这就需要使用一个白名单,只对白名单内存在的接口进行处理
  • 关闭loading,那就肯定是axios的后置拦截函数了。
  • 当同时请求多个接口,如何判断所有接口请求完成后关闭loading。用一个数组存储请求的接口路径,axios后置拦截函数中删除数组中返回状态的接口,数组长度=0,关闭loading即可。

3.实现

let apiList = [];  // 存储请求的接口
api.interceptors.request.use(
    request => {
        let {interfaceLoading,whiteList} = store.state.global
        // 启动全局loding
        if(whiteList.indexOf(request.url) > -1 && !interfaceLoading){
            store.commit('global/setInterfaceLoading',true)
            // 记录请求接口,用于判断何时取消loading
            apiList.push(request.url)
        }
        return request
    }
)

api.interceptors.response.use(
    response => {
        // 清除请求地址,清空则取消loading
        let index = apiList.findIndex((item)=>item===response.config.url)
        if(index!==-1){
            apiList.splice(index,1)
        }
        if(apiList.length===0){
            store.commit('global/setInterfaceLoading',false)
        }
        // 以下为处理返回数据结果
        if (response.data) {
            if (response.data.status === 200) {
                return Promise.resolve(response.data)
            }
            else if (response.data.errorType) {
                // alert.typeOne('error',response.data.msg)
                return Promise.resolve(response.data)
            } else {
                // 请求成功并且没有报错
                return Promise.resolve(response.data)
            }
        } else {
            toLogin()
        }
    }
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你使用的是 Vue.js 框架,并且是通过 Vue 组件中的 `v-loading` 指令来实现加载效果的,可以通过以下步骤来全局更改 `v-loading` 的样式: 1. 在你的 Vue 项目中创建一个新的 Vue 组件,例如命名为 `Loading.vue`。 2. 在 `Loading.vue` 文件中,定义一个 `<template>` 模板,用来渲染加载效果的 HTML 结构。 3. 在 `<template>` 中使用 `v-if` 条件渲染,来控制加载效果的显示与隐藏。 4. 在 `<style>` 中编写你想要的加载效果样式。 5. 在 `Loading.vue` 中,通过 `props` 接收 `v-loading` 指令的传参。 6. 在父组件中引入 `Loading.vue` 组件,并且注册为全局组件。 7. 在 `main.js` 中,使用 `Vue.directive` 全局注册 `v-loading` 指令,并且在指令的 `bind` 钩子函数中,将 `v-loading` 指令的值传递给 `Loading.vue` 组件的 `props`。 下面是代码示例: Loading.vue ```html <template> <div class="loading-container" v-if="loading"> <!-- 加载效果的 HTML 结构 --> </div> </template> <style> .loading-container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(255, 255, 255, 0.7); display: flex; justify-content: center; align-items: center; } /* 编写你想要的加载效果样式 */ </style> <script> export default { props: { loading: { type: Boolean, required: true } } } </script> ``` main.js ```js import Vue from 'vue' import App from './App.vue' import Loading from './components/Loading.vue' Vue.component('Loading', Loading) Vue.directive('loading', { bind: function (el, binding) { const loading = new Vue({ el: document.createElement('div'), data: { loading: false }, render: h => h(Loading, { props: { loading: this.loading } }) }) el.appendChild(loading.$el) el.loading = loading el.update = function () { el.loading.loading = binding.value } el.update() }, update: function (el) { el.update() } }) new Vue({ render: h => h(App), }).$mount('#app') ``` 现在你可以在任何 Vue 组件中使用 `v-loading` 指令,并且通过修改 `Loading.vue` 中的样式来全局更改加载效果的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值