第七篇 提升网页性能：深入解析HTTP请求优化策略（二）

// 假设我们有一个异步发送HTTP请求的方法fetchAsync
function fetchAsync(url) {
  return new Promise((resolve, reject) => {
    // 实际发送请求逻辑...
  });
}

// 请求队列类
class AsyncRequestQueue {
  constructor(maxConcurrent = 5) {
    this.queue = [];
    this.concurrentRequests = 0;
    this.maxConcurrent = maxConcurrent;
  }

  enqueue(requestInfo) {
    this.queue.push(requestInfo);
    this.processQueue();
  }

  processQueue() {
    if (this.concurrentRequests < this.maxConcurrent && this.queue.length > 0) {
      const requestInfo = this.queue.shift();
      this.concurrentRequests++;
      
      fetchAsync(requestInfo.url)
        .then(response => {
          // 处理响应...
          this.concurrentRequests--;
          this.processQueue();
        })
        .catch(error => {
          // 处理错误...
          this.concurrentRequests--;
          this.processQueue();
        });
    }
  }
}

// 使用示例
const queue = new AsyncRequestQueue(3);

const urls = ['url1', 'url2', 'url3', 'url4', 'url5'];
urls.forEach(url => queue.enqueue({ url }));

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor;

@Configuration
public class AsyncConfig {

    @Bean(name = "asyncExecutor")
    public ThreadPoolTaskExecutor threadPoolTaskExecutor() {
        ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();
        // 核心线程数
        executor.setCorePoolSize(5);
        // 最大线程数，这里与核心线程数相同，意味着超出核心线程数量的请求将进入队列等待
        executor.setMaxPoolSize(5);
        // 队列容量，当活跃线程数达到最大时，新的任务将在队列中等待，如果队列满了则根据拒绝策略处理
        executor.setQueueCapacity(Integer.MAX_VALUE); // 或设置为适当的值，例如：100
        // 线程前缀名
        executor.setThreadNamePrefix("Async-");
        // 初始化
        executor.initialize();
        
        return executor;
    }
}

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Async;
import org.springframework.stereotype.Service;

@Service
public class MyService {

    @Autowired
    private AsyncConfig.AsyncExecutor asyncExecutor;

    @Async("asyncExecutor") // 使用我们自定义的线程池执行器
    public void handleHttpRequest(String url) {
        // 发送HTTP请求的逻辑...
    }
}

// 定义一个基于Promise的异步HTTP请求函数（这里仅作模拟）
function sendAsyncRequest(url, priority) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`Sending request to ${url} with priority ${priority}`);
      resolve({ url, priority });
    }, Math.random() * 1000); // 模拟随机延迟
  });
}

// 创建一个优先队列类
class PriorityQueue {
  constructor() {
    this.queue = [];
  }

  enqueue(requestInfo) {
    let inserted = false;
    for (let i = 0; i < this.queue.length; i++) {
      if (requestInfo.priority > this.queue[i].priority) {
        this.queue.splice(i, 0, requestInfo);
        inserted = true;
        break;
      }
    }
    if (!inserted) {
      this.queue.push(requestInfo);
    }
  }

  dequeue() {
    return this.queue.shift();
  }

  isEmpty() {
    return this.queue.length === 0;
  }
}

// 请求队列管理器
class RequestQueueManager {
  constructor() {
    this.requestQueue = new PriorityQueue();
    this.isProcessing = false;
  }

  addRequest(url, priority) {
    const requestInfo = { url, priority };
    this.requestQueue.enqueue(requestInfo);
    this.processNextRequest();
  }

  async processNextRequest() {
    if (this.isProcessing || this.requestQueue.isEmpty()) return;

    this.isProcessing = true;
    const currentRequest = this.requestQueue.dequeue();

    try {
      const response = await sendAsyncRequest(currentRequest.url, currentRequest.priority);
      console.log('Received response:', response);
      // 在这里处理响应...
    } catch (error) {
      console.error('Error processing request:', error);
    } finally {
      this.isProcessing = false;
      this.processNextRequest();
    }
  }
}

// 使用示例
const queueManager = new RequestQueueManager();

queueManager.addRequest('/api/important-action', 2);
queueManager.addRequest('/api/background-update', 1);
queueManager.addRequest('/api/critical-action', 3);

// 这里的逻辑会确保优先级高的请求先被处理

import axios from 'axios';

// 创建一个新的CancelToken源
const source = axios.CancelToken.source();

axios.get('/api/data', {
  cancelToken: source.token // 将token传递给请求配置
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request cancelled:', error.message);
  } else {
    // 处理其他错误
  }
});

// 在需要取消请求的地方调用cancel方法
source.cancel('Operation canceled by the user.'); // 可以传入取消的原因信息

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request was aborted');
    } else {
      console.error('An error occurred:', error);
    }
  });

// 在某个时刻取消请求
controller.abort();