Vue基于vuex和axios拦截器实现加载效果和axios安装配置

准备好

使用vue-cli脚手架创建一个项目，并进入项目安装vuex和axios (NPM安装vuex，NPM安装axios) axios配置

在项目中安装axios模块(npm安装axios)后，进行以下配置：

main.js

//从' axios'/引入axios导入axios/修改原型链，全局使用Axios，这样就可以在每个组件的方法中调用$axios命令，完成数据请求vue . prototype . $ Axios=Axios loading组件

我选择在这里使用iview提供的加载组件。

npm安装iview

main.jsimport iView来自“iView”；导入“iview/dist/style/iview . CSS”；vue . use(iView)；在安装和介绍之后，将加载写成组件加载

Vuex状态状态设置控制加载的显示和隐藏

store.js(Vuex)

export const store=new vuex . store({ state : { isShow : false } })定义了状态中的isshow属性，默认情况下该属性为隐藏false

v-if='这个。$store.state.isShow '

为加载组件添加处于v-if绑定状态的isShow

组件使用axios请求数据

Button @click='getData '请求数据/button methods : { getData(){ this。$ axios . get(' https://www . API open . top/journal ismapi ')。然后(res={console.log (res)//返回请求的结果})。catch (err={console。log (err)})}}我在这里使用一个按钮触发事件，使用get请求一个在互联网上随机找到的api接口，然后在中返回请求的整个结果(不仅仅包括数据)。

Axios拦截器配置

main.js

//定义一个请求拦截器axios . interceptors . request . use(function(config){ store . state . is show=true；//在发送请求之前做一些操作。return config})//定义一个响应拦截器axios . interceptors . response . use(function(config){ store . state . is show=false；//在这里处理返回的数据。return config})定义一个请求拦截器(在请求开始时执行一些操作)和一个响应拦截器(接收到数据后执行一些操作)，设置拦截时要执行的操作，并在状态中更改isShow的布尔值，控制加载组件在触发请求数据时显示加载，在返回数据时隐藏加载。

特别说明：这里有个语法坑(我来回踩过很多次)。main.js中vuex状态下检索和操作的数据与此不同。$store.state在组件中，但直接store.state与上面的代码相同

效果显示

摘要

以上是边肖基于vuex和axios拦截器推出的Vue的加载效果和axios安装配置。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！