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

Question

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

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

Answer 1

由于 Vue 有 "loading" 个组件（因为 Nuxt 有自己的 $loading），我将仅使用 BootstrapVue 和 Axios 的示例 b-spinner作为 HTTP 客户端：

<b-spinner ng-if="loadingProgress">（如果 loadingProgress/sending 请求直到服务器 return 响应，则显示 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 here

上使用 BSpinner + AJAX Axios POST 的联系表单的进一步示例

另一个是vue-wait组件(linkhere)

希望这些就是您要找的。

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

Implementing Progress Bar for a client server case

rest

progress-bar

vue.js