实现客户端-服务器案例的进度条

Question

我有以下案例，我有一个在vue.js中实现的客户端和一个使用flask框架的基于python的后端。

我有一个restful接口，我需要从客户端向服务器发送请求以启动某些操作。这个操作可能需要4-5分钟的长时间，我知道要显示进度。如何使用http REST接口的当前技术堆栈在客户端和服务器之间实现这一点。

Answer 1

由于Vue有"加载"组件的buncha(因为Nuxt有自己的$loading(，我只使用BootstrapVue的b-spinner和Axios作为HTTP客户端：

<b-spinner ng-if="loadingProgress">(如果加载进度/发送请求，则显示Spinner，直到服务器返回响应(

methods: {
sendEmail() {
//set loading progess as true
this.loadingProgress = true;
axios.post(
'[your_API_URL]',
{
// data you wanted to POST as JSON
},
).then((response) => {
// reset your component inputs like textInput to null
// or your custom route redirect with vue-router
}).catch((error) => {
if (error.response) {
alert(error.response.data); // the error response
}
});
}, 

我在Formspree.io上使用BSpinner+AJAX Axios POST的联系表格的进一步示例

另一个是vue-wait组件(此处链接(

希望这些都是你想要的。