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链接

转载到其他平台需含本文的简书链接，vue技术我只在简书发布