用优雅的方式解决异步接口下的前端批量导入

2024-01-11 12:09:42

引言

在现代Web开发中，文件上传和处理是常见的场景。然而，当涉及到批量导入时，尤其是在异步接口的限制下，如何优雅地处理并发请求和队列管理就成了一个棘手的难题。本文将深入探讨一种前端批量导入的解决方案，该方案基于队列管理和并发限制，旨在提供高效且用户友好的文件处理体验。

挑战与解决方案

在异步接口的限制下，一次只能处理一个文件，这为批量导入带来了以下挑战：

并发请求管理： 如何协调大量文件的上传和处理，同时避免服务器端过载？
队列管理： 如何管理待处理文件队列，确保文件按照正确的顺序处理？
用户体验： 如何向用户提供进度更新，让他们了解导入状态？

为了应对这些挑战，我们的解决方案采用了以下策略：

队列管理： 使用队列来管理待处理文件，确保文件按照先入先出的原则处理。
并发限制： 设置一个并发限制，限制同时处理的文件数量，防止服务器端过载。
进度更新： 提供实时进度更新，让用户随时了解导入状态。

具体实现

1. 队列管理

我们使用一个JavaScript数组来实现队列。每当用户选择一个文件时，该文件都会添加到队列中。队列头部的文件会被优先处理。

const queue = [];

// 添加文件到队列
const addFileToQueue = (file) => {
  queue.push(file);
};

// 从队列中移除文件
const removeFileFromQueue = (file) => {
  const index = queue.indexOf(file);
  if (index > -1) {
    queue.splice(index, 1);
  }
};

2. 并发限制

我们使用一个信号量来限制并发请求的数量。当并发请求达到限制时，后续请求将被阻塞，直到有可用槽位为止。

const semaphore = new Semaphore(maxConcurrentRequests);

// 发送请求
const sendRequest = (file) => {
  semaphore.acquire();

  // 发送异步请求
  fetch(url, {
    method: 'POST',
    body: file,
  })
  .then((response) => {
    // 处理响应
    semaphore.release();
  })
  .catch((error) => {
    // 处理错误
    semaphore.release();
  });
};

3. 进度更新

我们使用WebSocket或SSE（Server-Sent Events）来提供实时进度更新。当服务器端处理文件时，它会通过WebSocket或SSE向客户端发送进度消息。

// 建立WebSocket连接
const socket = new WebSocket('ws://localhost:8080/progress');

// 监听进度消息
socket.addEventListener('message', (event) => {
  // 更新进度条
});