高效网络请求技能实战：从基础封装到性能优化

4次阅读

共计 3835 个字符，预计需要花费 10 分钟才能阅读完成。

在开发过程中，未经封装的网络请求往往会导致以下问题：

代码冗余 ：每个请求都需要重复编写基础配置，如 headers 设置、baseURL 等。
错误处理缺失 ：错误处理逻辑分散在各个请求中，难以统一管理。
并发瓶颈 ：缺乏并发控制，高并发场景下可能导致服务器压力过大或客户端卡顿。

Axios
优点：内置拦截器、请求取消、自动转换 JSON 数据、TypeScript 支持良好。
缺点：体积较大（约 13KB）。
Fetch
优点：原生 API，无需额外依赖，体积小。
缺点：功能较少，需手动处理 JSON 转换，错误处理不够直观。

建议：对于复杂项目，推荐使用 Axios；对于轻量级应用，可以考虑 Fetch。

import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';

class HttpClient {
  private instance: AxiosInstance;

  constructor(baseURL: string) {this.instance = axios.create({ baseURL});
  }

  public async request<T>(config: AxiosRequestConfig): Promise<T> {
    try {const response: AxiosResponse<T> = await this.instance.request(config);
      return response.data;
    } catch (error) {this.handleError(error);
      throw error;
    }
  }

  private handleError(error: unknown): void {
    // 统一错误处理逻辑
    console.error('Request failed:', error);
  }
}

public async requestWithRetry<T>(
  config: AxiosRequestConfig,
  maxRetries = 3
): Promise<T> {
  let retries = 0;
  while (retries < maxRetries) {
    try {return await this.request<T>(config);
    } catch (error) {
      retries++;
      if (retries >= maxRetries) throw error;
      await new Promise((resolve) => setTimeout(resolve, 1000 * retries));
    }
  }
  throw new Error('Max retries exceeded');
}

private cache = new Map<string, {data: any; timestamp: number}>();

public async requestWithCache<T>(
  config: AxiosRequestConfig,
  cacheTime = 300000 // 5 分钟
): Promise<T> {const cacheKey = JSON.stringify(config);
  const cached = this.cache.get(cacheKey);

  if (cached && Date.now() - cached.timestamp < cacheTime) {return cached.data;}

  const data = await this.request<T>(config);
  this.cache.set(cacheKey, { data, timestamp: Date.now() });
  return data;
}

class RateLimiter {
  private tokens: number;
  private lastRefillTime: number;

  constructor(private maxTokens: number, private refillRate: number) {
    this.tokens = maxTokens;
    this.lastRefillTime = Date.now();}

  public async acquire(): Promise<void> {this.refill();
    while (this.tokens <= 0) {await new Promise((resolve) => setTimeout(resolve, 100));
      this.refill();}
    this.tokens--;
  }

  private refill(): void {const now = Date.now();
    const timePassed = now - this.lastRefillTime;
    const tokensToAdd = Math.floor((timePassed * this.refillRate) / 1000);
    this.tokens = Math.min(this.tokens + tokensToAdd, this.maxTokens);
    this.lastRefillTime = now;
  }
}

public async requestWithETag<T>(config: AxiosRequestConfig): Promise<T> {const cacheKey = JSON.stringify(config);
  const cached = this.cache.get(cacheKey);

  if (cached) {
    config.headers = {
      ...config.headers,
      'If-None-Match': cached.etag
    };
  }

  try {const response = await this.instance.request<T>(config);
    this.cache.set(cacheKey, {
      data: response.data,
      etag: response.headers['etag'],
      timestamp: Date.now()});
    return response.data;
  } catch (error) {if (axios.isAxiosError(error) && error.response?.status === 304) {return cached.data;}
    throw error;
  }
}

确保取消未完成的请求：

private cancelTokens = new Map<string, AbortController>();

public cancelRequest(requestId: string): void {const controller = this.cancelTokens.get(requestId);
  if (controller) {controller.abort();
    this.cancelTokens.delete(requestId);
  }
}

public async request<T>(config: AxiosRequestConfig & { requestId?: string}): Promise<T> {const controller = new AbortController();
  if (config.requestId) {this.cancelTokens.set(config.requestId, controller);
  }

  try {
    const response = await this.instance.request<T>({
      ...config,
      signal: controller.signal
    });
    return response.data;
  } finally {if (config.requestId) {this.cancelTokens.delete(config.requestId);
    }
  }
}

自动注入 CSRF Token：

private csrfToken: string | null = null;

public async initializeCSRFToken(): Promise<void> {const response = await this.instance.get('/csrf-token');
  this.csrfToken = response.data.token;
}

private addCSRFToken(config: AxiosRequestConfig): AxiosRequestConfig {if (this.csrfToken && ['post', 'put', 'patch', 'delete'].includes(config.method?.toLowerCase() || '')) {
    config.headers = {
      ...config.headers,
      'X-CSRF-Token': this.csrfToken
    };
  }
  return config;
}

我们使用 JMeter 对封装前后的性能进行了对比测试：