推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
这是一个创建于 1639 天前的主题，其中的信息可能已经有所发展或是发生改变。
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>  | 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 |
 | 2 kop1989 2021-04-23 11:23:14 +08:00 自己封装一个符合自己需求的 ajax 方法不就 ok 了。 |
 | 4 lqzhgood OP |
 | 5 christin 2021-04-23 14:21:17 +08:00 via iPhone 我看过写在拦截器里的 用 vuex 开启和关闭 loading 再加一个防抖防止多次请求中间 loading 闪烁 |
Select Language