本章概述
axios的拦截器也是钩子的一种,在请求或响应前可以定义一些操作。最广泛的应用就是利用axios钩子防止用户多次点击按钮发送请求。
应用场景
当用户高频率点击提交按钮可能就会把一个请求发送多次,为了防止这种情况。我们可以利用钩子设置一个状态isLoading。请求钩子内置true,响应钩子内置false,每次调用前判断isLoading是否为真,如果为真不继续请求。isLoading使用Vuex进行状态管理。
图文详解
首先vuex中添加一个状态isLoading。如图1,store.js写入
然后添加拦截器,我写在了main.js中。如图2。使用store.commit()转换isLoading的状态。
最后在我二次封装的axios中判断isLoading。如果为真直接返回不请求。
其他
除了在二次封装的axios中判断isLoading的真假。我们还可以通过编写公共方法的方式,在公共方法中取isLoading的值,在参数准备等之前就调用方法型如(if(this.$common.checkLoading()))来判断。或者直接在组件中用computed读vuex中的状态,在参数准备等之前判断形如(this.isLoading)的值。