axios拦截器与vuex状态控制应用

本章概述

        axios的拦截器也是钩子的一种,在请求或响应前可以定义一些操作。最广泛的应用就是利用axios钩子防止用户多次点击按钮发送请求。 

应用场景

        当用户高频率点击提交按钮可能就会把一个请求发送多次,为了防止这种情况。我们可以利用钩子设置一个状态isLoading。请求钩子内置true,响应钩子内置false,每次调用前判断isLoading是否为真,如果为真不继续请求。isLoading使用Vuex进行状态管理。

图文详解

         首先vuex中添加一个状态isLoading。如图1,store.js写入

图1.store.js

        然后添加拦截器,我写在了main.js中。如图2。使用store.commit()转换isLoading的状态。

图2.main.js

        最后在我二次封装的axios中判断isLoading。如果为真直接返回不请求。

图3.axios.js

其他

        除了在二次封装的axios中判断isLoading的真假。我们还可以通过编写公共方法的方式,在公共方法中取isLoading的值,在参数准备等之前就调用方法型如(if(this.$common.checkLoading()))来判断。或者直接在组件中用computed读vuex中的状态,在参数准备等之前判断形如(this.isLoading)的值。

项目源码gitee链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容