本章概述
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）的值。
转载到其他平台需含本文的简书链接，vue技术我只在简书发布
网友评论