axios批量请求(支持进度跟踪、暂停、恢复)

为了实现批量请求并实时跟踪进度，支持暂停请求、恢复请求封装的方法 BatchRequest 是一个基于 axios 的批量请求工具类，设计用于管理多个异步请求的执行。该类提供了以下核心功能：

• 批量请求：同时管理多个 axios 请求。
• 进度跟踪：实时更新请求执行进度。
• 暂停与恢复：支持随时暂停正在执行的请求，并可恢复未完成的请求。

---

主要功能

1. 批量执行请求

• • 使用 axios 发起多个请求，并支持逐一执行。
  • 自动跟踪每个请求的完成状态。

2. 进度更新

• • 在每个请求完成后计算当前进度百分比。
  • 通过回调函数将进度通知给外部调用方。

3. 暂停功能

• • 在执行过程中，随时调用暂停功能，立即停止剩余请求的执行。

4. 恢复功能

• • 恢复后从未完成的请求继续执行，保证请求的完整性。

---

使用场景

• 批量数据获取：需要从多个接口获取数据并合并处理。
• 任务进度监控：需要对批量任务的执行状态进行实时跟踪。
• 可控任务执行：需要支持动态暂停和恢复的场景。

---

关键方法

1. 构造函数

constructor(requests, onProgress)

• • requests：数组，包含所有需要执行的请求信息（如 path 和 params）。
  • onProgress：回调函数，用于接收进度更新（参数：进度百分比和已完成请求数）。

2. 执行批量请求

async execute()

• • 开始执行所有请求，返回所有请求结果的数组。

3. 暂停请求

pause()

• • 暂停当前请求，终止后续请求的执行。

4. 恢复请求

resume()

• • 从暂停状态继续执行未完成的请求。

---

代码示例

import { BatchRequest } from './BatchRequest';

const requests = [
  { path: '/api/user', params: { id: 1 } },
  { path: '/api/order', params: { id: 2 } },
  { path: '/api/product', params: { id: 3 } },
];

const onProgress = (progress, completed) => {
  console.log(`Progress: ${progress}% (${completed} requests completed)`);
};

// 初始化批量请求实例
const batchRequest = new BatchRequest(requests, onProgress);

// 开始执行请求
batchRequest.execute().then((results) => {
  console.log('All requests completed:', results);
});

// 暂停请求
setTimeout(() => {
  batchRequest.pause();
  console.log('Requests paused');
}, 2000);

// 恢复请求
setTimeout(() => {
  batchRequest.resume();
  console.log('Requests resumed');
}, 4000);

方法说明

/**
 * @Description: 批量请求类，用于执行多个 axios 请求，并提供进度跟踪和暂停功能。
 * @Version: 1.0
 * @Autor: YGQ
 * @Date: 2024-04-15 16:29:55
 * @LastEditors: YGQ
 * @LastEditTime: 2024-04-15 16:30:37
 */
import Vue from "vue";
import axios from 'axios';

const vthis = Vue.prototype
export class BatchRequest {
  /**
 * 构造函数
 * @param {Array} requests - 要执行的axios请求数组
 * @param {Function} onProgress - 进度更新回调函数
 */
  constructor(requests, onProgress) {
    this.requests = requests;
    this.onProgress = onProgress;
    this.completedRequests = 0;
    this.totalRequests = requests.length;
    this.isPaused = false;
    this.cancelSource = axios.CancelToken.source();
  }
  // 开始执行批量请求
  async execute () {
    const responses = [];
    for (let i = 0; i < this.requests.length; i++) {
      const el = this.requests[i]
      if (this.isPaused) {
        break;
      }

      try {
        const response = await vthis.$post(el.path, el.params, {
          cancelToken: this.cancelSource.token
        });
        responses.push(response.data);
        this.completedRequests++;

        // 计算进度百分比
        const progress = Math.floor((this.completedRequests / this.totalRequests) * 100);
        this.onProgress(progress, this.completedRequests);
      } catch (error) {
        console.error(`Request ${i} failed:`, error.message);
      }
    }
    return responses;
  }

  // 暂停批量请求
  pause () {
    this.isPaused = true;
    this.cancelSource.cancel('Request paused');
  }
  // 恢复暂停的批量请求 
  resume () {
    this.isPaused = false;
    this.cancelSource = axios.CancelToken.source();
    this.execute();
  }
}