为客户端服务器用例实现进度条

Question

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

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

Answer 1

由于Vue有一大堆“加载”组件(因为Nuxt有自己的$loading)，所以我将使用BootstrapVue和Axios的示例b-spinner作为HTTP客户端：

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

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 here上使用BSpinner + AJAX Axios发布的联系人表单的进一步示例

另一个是vue-wait组件(链接here)

希望这些就是你想要的。