V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
lqzhgood
V2EX  ›  JavaScript

Ajax 请求的如何优雅的 loading

  •  1
     
  •   lqzhgood · 2021-04-23 10:50:24 +08:00 · 2246 次点击
    这是一个创建于 1301 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Ajax 请求前总是要需要一个 loading 变量来

    • 防止重复点击
    • 开启 loading 效果

    那么这个 loading 的最佳实践是啥? 每一个 Ajax 都要写一个 loading, 感觉每次重复写很蛋疼,

    • 并不能用 axios 的全局拦截器,那样只能全局 loading, 实例中又很难拿到这个状态来作 防止重复点击

    用 vue 写个示例代码

    <template>
    	<div>
    		<div class="del" v-loading="loading.del"></div>
    		<div class="list" v-loading="loading.list"></div>
    	</div>
    </template>
    <script>
    export default {
    	name: '',
    	data: () => ({
    		loading: {
    			del: false,
    			list: false,
    		},
    	}),
        methods:{
            ajaxDel(){
                const {loading} = this;  // <--- 这一坨
                if (loading.del) return ; // <--- 这一坨
                loading.del = true; // <--- 这一坨
    
                ajax.get('/del')
                    .then(() => {...})
                    .catch(() => {...})
                    .finally(() => {
                        loading.del = false;  // <--- 这一坨
                    })
            },
            ajaxDel(){
                const {loading} = this;
                if (loading.list) return ;
                loading.list = true;
    
                ajax.get('/list')
                    .then(() => {...})
                    .catch(() => {...})
                    .finally(() => {
                        loading.list = false;
                    })
            }
        }
    };
    </script> 
    
    
    6 条回复    2021-04-25 09:16:12 +08:00
    John60676
        1
    John60676  
       2021-04-23 11:07:19 +08:00   ❤️ 1
    ☺️用第三方库来管理,例如我最近写的 [VueRequest]( https://www.attojs.com/),一个能轻松帮你管理请求状态(支持 SWR,轮询,错误重试,缓存,分页等)的 Vue 3 请求库 。

    你说的 loading 内部就帮你解决了

    github: https://github.com/AttoJS/vue-request
    kop1989
        2
    kop1989  
       2021-04-23 11:23:14 +08:00
    自己封装一个符合自己需求的 ajax 方法不就 ok 了。
    lqzhgood
        3
    lqzhgood  
    OP
       2021-04-23 11:25:32 +08:00
    @John60676 3Q 我试试~
    lqzhgood
        4
    lqzhgood  
    OP
       2021-04-23 11:31:31 +08:00
    @kop1989 当然得封装, 关键是封装的最佳实践是啥咯~

    loading 状态需要写两次,如果把 loading 做对象整个做入参又很别扭
    christin
        5
    christin  
       2021-04-23 14:21:17 +08:00 via iPhone
    我看过写在拦截器里的 用 vuex 开启和关闭 loading 再加一个防抖防止多次请求中间 loading 闪烁
    lqzhgood
        6
    lqzhgood  
    OP
       2021-04-25 09:16:12 +08:00
    @christin 全局的 loading 用 vuex 处理没关系~
    页面上面的局部 loading 用 vuex 就不合适了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1047 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 22:24 · PVG 06:24 · LAX 14:24 · JFK 17:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.