进入页面时，一般在获取数据时，会先显示一个加载，然后在请求完成后隐藏加载渲染页面。记录请求状态只需要一个属性，然后页面就会根据这个状态呈现。

异步处理程序(){this。loading=trueawatfetch()this。loading=false}是一个很简单的功能，但是当需要处理的地方很多的时候，还是很繁琐的，所以不知道能不能统一设置处理请求的loading。然后页面根据加载状态决定要显示的内容，并根据自己的想法做一些封装，自动为所有ajax请求设置加载状态。主要思想是将所有请求集中在一个实例上，通过代理属性进行访问，并将加载状态提交给存储状态。

装置

$ npm安装vue-Ajax-加载

示范

在线演示(打开缓慢)

使用

配置商店的状态和变化

从“vue-Ajax-loading”const store=new vuex . store导入{loading state，loading variations } ({ state : }.加载状态}，变体： {.加载变体}})将所有请求集中在一个对象上

从“vue-ajax-loading”导入{ ajaxLoading }“从‘axios’导入存储区导入axios”./store//由Vuex创建的axios.defaults.baseurl实例。store=' https://cnodejs.org/API/v1'//concentrates将请求存储在单个对象上。例如，const service={ global : {//global request gettopics(){ return axios . get('/topics ')}，Gettopicbyid(id=' 5433 d5e4e 737 CBE 96 dcef 312 '){ return xios . get(`/topic/$ { id } `) }，module : {//有一个命名空间请求。命名空间为topic topic : { get topics(){ return axios . get('/topics ')}。gettopicbyid(id=' 5433 d5e 4e 737 CBE 96 dcef 312 '){ return axios . get(`/topic/$ { id } `) } }导出默认ajaxloading ({store，service})完成上述配置后，通过上述导出的对象发送请求会自动设置请求状态，然后可以通过此访问请求状态。$store.state .正在加载此。$加载组件，例如：

el-button类型=' primary ' : loading=' $ loading . getTopics ' @ click=' handler 1 ' getTopics/El-button El-button类型=' primary ' : loading=' $ loading。delay' @ click=' delay' time两秒/El-button El-button type=' primary ' : loading=' $ loading . topic . gettopics ' @ click=' handler 3 ' topic . gettopics/El-button import API from ' path/to/API ' export default { methods : { handler 1(){ API . gettopics()}，handler 3(){ API . topics()}，delay(){ API . delay()} } options store

由Vuex创建的实例。商店

服务

包含所有请求的对象，您可以配置全局和模块属性

全局：全局范围的请求，可以设置为对象或数组对象模块：具有名称空间的请求，类型为对象，属性名为名称空间摘要

以上是边肖向您介绍的自动设置vue项目请求状态的配置方法。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！