ajax - 如何从长时间的异步过程中接收实时更新？

Question

我正在编写一个小型内部 Web 应用程序，该应用程序读取表单数据并创建一个 Excel 文件，然后将该文件通过电子邮件发送给用户。

但是，我很难理解如何在流程完成时为用户实现实时更新。有时这个过程需要10秒，有时这个过程需要5分钟。

目前，用户要等到该过程完成后才能看到任何结果 - 在该过程完成时他们看不到任何更新。前端在显示报告信息之前等待服务器的 201 响应，并且用户被“阻止”，直到 RC 完成。

我很难理解如何异步启动报告创建 (RC) 流程，同时允许用户导航到网站的其他页面。或查看后台发生的更新。我应该在这里澄清一下，RC 流程中的一些步骤使用了 Promises。

我想每秒轮询一次服务器以获取正在生成的报告的更新。

这里有一些简单的代码来阐明我的理解:

端点

// CREATE REPORT
router.route('/report')
  .post(function(req, res, next) {

    // Generate unique ID to keep track of report later on.
    const uid = generateRandomID();

    // Start report process ... this should keep executing even after a response (201) is returned.
    CustomReportLibrary.createNewReport(req.formData, uid);

    // Respond with a successful creation.
    res.status(201);
  }
}

// GET REPORT
router.route('/report/:id')
.get(function(req, res, next){

  // Get our report from ID.
  let report = CustomReportLibrary.getReport(req.params.id);

  // Respond with report data
  if(report) { res.status(200).json(report); }
  else { res.status(404); }
}

自定义报告库

// Initialize array to hold reports
let _dataStorage = []; 

function createNewReport(data, id) {

  // Create an object to store our report information
  let reportObject = {
    id: id,
    status: 'Report has started the process',
    data: data  
  }

  // Add new report to global array.
  _dataStorage.push(reportObject);

  // ... continue with report generation. Assume this takes 5 minutes.
  // ...
  // ... update _dataStorage[length-1].status after each step
  // ...
  // ... finish generation.
}

function getReport(id) {
  // Iterate through array until report with matching ID is found.
  // Return report if match is found.
  // Return null if no match is found.
}

据我了解，即使返回 201 响应，CustomerReportLibrary.createNewReport() 也会在后台执行。在前端，我会定期对 /report/:id 进行 AJAX 调用，以获取报告的更新。这是正确的方法吗？有更好的方法吗？

Answer 1

我认为你的做法是正确的。 HTTP 202(请求已被接受处理，但处理尚未完成)是处理您的情况的正确方法。

可以这样完成:

1. 客户端发送POST/reports，服务器开始创建新报告并返回:

   202 Accepted
   Location: http://api.domain.com/reports/1
   

2. 客户端发出 GET/reports/1 来获取报告状态

以上所有流程都是异步的，因此用户不会被阻止。