fetch网络请求封装示例分析

# fetch网络请求封装示例分析

## 引言

在现代Web开发中，网络请求是前端与后端交互的核心方式。`fetch`作为浏览器原生API，逐渐取代了传统的`XMLHttpRequest`。本文将通过一个完整的封装示例，分析如何基于`fetch`实现可复用、易维护的网络请求层。

## 一、基础封装实现

### 1.1 基本请求封装
```javascript
class HttpRequest {
  static async request(method, url, data = null, headers = {}) {
    const config = {
      method,
      headers: new Headers({
        'Content-Type': 'application/json',
        ...headers
      }),
    };

    if (data) {
      config.body = JSON.stringify(data);
    }

    try {
      const response = await fetch(url, config);
      return await this._handleResponse(response);
    } catch (error) {
      throw this._handleError(error);
    }
  }

  static async _handleResponse(response) {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  }

  static _handleError(error) {
    console.error('Request failed:', error);
    return error;
  }
}

1.2 方法拆解

• 请求拦截：统一处理请求方法和headers
• 响应处理：检查HTTP状态码并解析JSON
• 错误处理：集中捕获网络错误和业务错误

二、高级功能扩展

2.1 请求拦截器

const interceptors = {
  request: [],
  response: []
};

class HttpRequest {
  static useRequestInterceptor(interceptor) {
    interceptors.request.push(interceptor);
  }

  static async request(method, url, data, headers) {
    // 执行请求拦截
    for (const interceptor of interceptors.request) {
      ({ method, url, data, headers } = 
        await interceptor(method, url, data, headers));
    }
    
    // ...原有请求逻辑
  }
}

2.2 常见功能实现

三、TypeScript增强版

3.1 类型定义

interface RequestConfig {
  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
  url: string;
  data?: unknown;
  headers?: Record<string, string>;
  timeout?: number;
}

interface Response<T = any> {
  code: number;
  data: T;
  message: string;
}

3.2 泛型方法

static async get<T>(url: string): Promise<Response<T>> {
  return this.request('GET', url);
}

四、实际应用示例

4.1 用户模块API

export const UserAPI = {
  login: (credentials) => 
    HttpRequest.post('/api/login', credentials),
  
  getProfile: () => 
    HttpRequest.get('/api/user/profile')
};

4.2 组件中使用

async function fetchData() {
  try {
    const res = await UserAPI.getProfile();
    setUserData(res.data);
  } catch (err) {
    showToast(err.message);
  }
}

五、对比其他方案

5.1 与axios对比

5.2 性能优化建议

1. 避免重复封装已有功能
2. 对于简单场景可直接使用原生fetch
3. 考虑添加请求去重功能

六、总结

本文展示的fetch封装方案具有以下特点： - 分层清晰：基础请求/响应/错误处理分离 - 可扩展性强：通过拦截器机制支持各种定制需求 - 类型安全（TS版）：完善的类型定义保障代码质量

完整实现代码已上传至GitHub仓库。

最佳实践建议：根据项目复杂度选择封装层级，中小型项目建议采用本文的基础封装，大型项目可考虑加入更多企业级功能如监控上报、自动化测试等。 “`

注：本文示例代码已简化，实际使用时需要根据项目需求进行调整。建议在封装时保留足够的灵活性，同时避免过度设计。