Java给前端返回接口执行进度

在实际开发过程中，有时候我们需要处理一些耗时的操作，比如批量处理数据或者上传大文件等。为了提升用户体验，我们希望能够给前端返回接口执行的进度信息，让用户知道操作的进展情况。本文将介绍如何使用Java给前端返回接口执行进度，并提供相应的代码示例。

为什么需要接口执行进度

当我们处理一些耗时的操作时，用户可能会面临长时间的等待。如果没有任何反馈，用户可能会感到焦虑或者无法预估操作的完成时间。为了提升用户体验，我们可以通过返回接口执行进度的方式，让用户了解操作的进展情况。这样可以让用户感到操作正在进行中，增加用户的耐心和信心。

实现思路

实现接口执行进度的方式有很多种，下面是一种常见的实现思路。

  1. 前端发送异步请求给后端，后端返回一个任务ID。
  2. 前端定时发送请求给后端，获取任务的执行进度。
  3. 后端根据任务ID查询任务的执行情况，并返回给前端。

代码示例

下面是一个简单的示例，演示了如何使用Java给前端返回接口执行进度。

后端代码示例

@RestController
public class ProgressController {

    private Map<String, Integer> progressMap = new ConcurrentHashMap<>();

    @PostMapping("/task")
    public String startTask() {
        // 生成一个随机的任务ID
        String taskId = UUID.randomUUID().toString();
        // 启动一个线程执行耗时任务
        Thread thread = new Thread(() -> {
            for (int i = 0; i <= 100; i++) {
                // 将任务的执行进度保存到Map中
                progressMap.put(taskId, i);
                try {
                    // 模拟耗时操作
                    Thread.sleep(1000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            // 执行完成后，从Map中移除任务ID
            progressMap.remove(taskId);
        });
        thread.start();
        // 返回任务ID给前端
        return taskId;
    }

    @GetMapping("/progress/{taskId}")
    public int getProgress(@PathVariable String taskId) {
        // 根据任务ID查询任务的执行进度
        Integer progress = progressMap.get(taskId);
        return progress != null ? progress : 0;
    }
}

上述代码中，我们使用ConcurrentHashMap来保存任务的执行进度。当前端发送一个POST请求到/task接口时，后端会生成一个随机的任务ID，并启动一个线程执行耗时任务。在任务执行过程中，每隔1秒钟更新一次任务的执行进度。当前端发送GET请求到/progress/{taskId}接口时，后端根据任务ID查询任务的执行进度，并返回给前端。

前端代码示例

function startTask() {
    // 发送POST请求给后端
    $.post("/task", function (taskId) {
        // 定时获取任务的执行进度
        var progressInterval = setInterval(function () {
            $.get("/progress/" + taskId, function (progress) {
                if (progress >= 0 && progress <= 100) {
                    // 更新页面上的进度条
                    updateProgressBar(progress);
                } else {
                    // 任务执行完成，清除定时器
                    clearInterval(progressInterval);
                }
            });
        }, 1000);
    });
}

function updateProgressBar(progress) {
    // 更新页面上的进度条
    $("#progressBar").css("width", progress + "%").text(progress + "%");
}

上述代码中，我们使用了jQuery库发送异步请求给后端，并使用setInterval函数定时获取任务的执行进度。在获取到执行进度后，我们可以更新页面上的进度条。当任务执行完成后，我们清除定时器，并执行相应的操作。

状态图

下面是本文中描述的接口执行进度的状态图。

stateDiagram
    [*] --> InProgress
    InProgress --> Completed
    Completed --> [*]

在上述状态图中，我们定义了三个状态：InProgress表示正在执行中，Completed表示已经完成，[*]表示初始状态和结束状态。