在前端获取ajax调用进度状态

Question

我有一个允许用户上传和处理特定文件的网页。用户上传一些文件后，单击“处理”按钮后，将向后端服务发送 ajax 调用。在 beforeSend 函数中，有一个覆盖应用于屏幕并显示一个微调器。当成功功能被触发时，覆盖层被移除，并显示一个 toast 通知，如“文件已处理！” 我的目标是根据后端服务中的特定检查点以某种方式显示每个文件的进度状态。 假设后端服务在调用时执行以下任务：解析文件，映射到特定格式，将数据发送到数据库 A....，最后它发回 http 状态 200 和类似 JSON

{
   "status":"Success",
   "message": "File X was processed"
}

现在我想要的是，在触发成功事件之前，不只是获取覆盖并禁用整个页面，而是根据后端到达的确切步骤为每个文件更新一个进度条。

例如，对于文件 A，我希望看到以下转换：5% 解析文件，10% 映射文件...90% 将数据发送到数据库，100% 已处理。

这是否可以实现？

Answer 1

HTTP 请求由请求和响应组成。除了the onprogress event 之外，没有直接的方法可以获取状态更新，这可以让您查看已传输的数据量。这对于确定有多少数据已发送到服务器很有用，但对于服务器处理该数据的程度并没有那么大。

您可以将进度存储在数据库中并轮询网络服务以读取最新状态。

您还可以让服务器使用Websockets 将更新推送到客户端以进行双向通信。

这样一个系统的粗略轮廓可能如下所示：

1. 打开一个 Websocket
2. 使用 Ajax 发送文件
3. 在 HTTP 响应中获取服务器生成的 ID
4. 注意来自 Websocket 的提及该 ID 的消息

您还可以考虑通过 Websockets 完成整个工作（即也可以通过这种方式上传文件）。一个快速的谷歌搜索出现this library 用于将文件上传到托管在 Node.js 上的 Websocket 服务。

Answer 2

您需要研究的几点。

通常在生产代码中，我们需要有超时。如果您正在对后端 API 进行 ajax 调用，则会有与该 api 调用相关的超时。假设如果超时超过 2 分钟，那么它将向您发送 504 网关超时错误。

为了克服这个问题并实现您想要的功能，您可以拥有任何数据库（让我们考虑 SQL 服务器）。在您的 SQL 服务器中，创建一个表： Process_Table 使用架构： Process_id( 将存储进程 id/name ) 百分比（将存储百分比） At_step（解析、映射、发送到数据库等）

使用 Javascript（或您选择的任何框架），使用 setInterval() 来进行 check_process() api 调用。对于 check_proceess，您可以传入 process_id，然后检查 db。对于间隔，您可以将其设置为 5 秒。这样每 5 秒就会进行一次调用。

您可以读取这些 API 调用的响应并进行处理。