Javascript 在ajax完成之前，如何显示加载指示器？

我想显示加载微调器，直到我的消息完成加载

我在

消息中实现了微调器。vue

：

从“…”导入后端
导出默认值{
挂载：函数（）{
这是loadMessages（）；
},
方法：{
loadMessages（）{
var self=这个；
backend.getMessages（）.then（函数（resp）{
self.previousDate=null；
self.messages=响应数据；
self.openLoader（）；
});
},
openLoader（）{
让loader=this.$loading.show({
加载器：“旋转器”，
颜色：“#e32339”，
坎坎塞尔：是的，
容器：此.$refs.loadingContainer
});
设置超时（（）=>{
loader.hide（）
}, 2500)
},
}
}

我的微调器在容器上显示2500毫秒，但我只是在模拟它，不知道AJAX请求何时完成。在AJAX请求完成之前，我不知道如何显示微调器。现在它只显示2500毫秒

我的

backend.getMessages（）

方法如下所示：

从“axios”导入axios
常量主机=/*进程*/
导出默认值{
getMessages:函数（对等）{
返回axios.get（`${host}/api/messages`{
参数：{
me:localStorage.getItem（“用户id”），
设备：localStorage.getItem（“设备id”），
同行：同行
}
}) 
},
//...
}

• 在数据中添加

  var加载

• 在此处显示

  微调器

• 然后

getMessages:函数（对等）{
this.loading=true；//正在加载AJAX请求
返回axios.get（`${host}/api/messages`{
参数：{
me:localStorage.getItem（“用户id”），
设备：localStorage.getItem（“设备id”），
同行：同行
}
})
},
loadMessages（）{
var self=这个；
backend.getMessages（）.then（函数（resp）{
self.previousDate=null；
self.messages=响应数据；
self.openLoader（）；
self.load=false//微调器消失
});
},

• 在数据中添加

  var加载

• 在此处显示

  微调器

• 然后

getMessages:函数（对等）{
this.loading=true；//正在加载AJAX请求
返回axios.get（`${host}/api/messages`{
参数：{
me:localStorage.getItem（“用户id”），
设备：localStorage.getItem（“设备id”），
同行：同行
}
})
},
loadMessages（）{
var self=这个；
backend.getMessages（）.then（函数（resp）{
self.previousDate=null；
self.messages=响应数据；
self.openLoader（）；
self.load=false//微调器消失
});
},

加载程序应在开始请求之前显示。请注意，返回一个

Promise

，在请求完成时解析，因此您可以使用该

Promise

的off来隐藏加载程序：

mounted（）{
//获取邮件时显示加载程序。。。
const loader=this.$loading.show（）
backend.getMessages（）
。然后（resp=>/*…*/）
.finally（（）=>loader.hide（））
}

以下是另一种书写方式：

async-mounted（）{
//获取邮件时显示加载程序。。。
const loader=this.$loading.show（）
试一试{
const resp=await backend.getMessages（）
/*...*/
}最后{
loader.hide（）
}
}

加载程序应在开始请求之前显示。请注意，返回一个

Promise

，在请求完成时解析，因此您可以使用该

Promise

的off来隐藏加载程序：

mounted（）{
//获取邮件时显示加载程序。。。
const loader=this.$loading.show（）
backend.getMessages（）
。然后（resp=>/*…*/）
.finally（（）=>loader.hide（））
}

以下是另一种书写方式：

async-mounted（）{
//获取邮件时显示加载程序。。。
const loader=this.$loading.show（）
试一试{
const resp=await backend.getMessages（）
/*...*/
}最后{
loader.hide（）
}
}

self=this

？这不是python

self=This

？这不是python这应该是self，即self.load=true；getMessages（）位于我的后端文件中。我认为这些东西不属于后端文件。而且后端文件不知道加载是否存在？是的，后端文件不知道前端变量/元素，除非您明确地传递，否则这应该是self，即self.load=true；getMessages（）位于我的后端文件中。我认为这些东西不属于后端文件。而且后端文件不知道加载是否存在？是的，后端文件不知道前端变量/元素，除非您明确地传递。最后，它不是try-catch的一部分，并且无论是否处理异常都将被执行？现在我的加载程序没有隐藏，

。最后，
总是在
承诺解决后运行。你试过什么代码？您可以链接到Codesandbox中的复制吗？最终不是try catch的一部分，并且无论是否处理异常都将被执行？现在我的加载程序没有隐藏，
。最后，
总是在
承诺解决后运行。你试过什么代码？你能链接到Codesandbox中的复制品吗？