Fetch API详解 - 元素码农

发布时间: 2025-03-23 08:25

↑

# Fetch API详解

本文将详细介绍React Native中Fetch API的使用方法,帮助你掌握网络请求的核心技巧。通过实际案例,你将学会如何使用Fetch API进行数据交互,处理各种网络场景。

## Fetch API基础

### 1. 基本概念

Fetch API是一个现代的、基于Promise的HTTP客户端,它提供了以下特点:

- 简单直观的API设计
- 基于Promise的异步处理
- 支持请求和响应的拦截
- 内置的JSON处理
- 支持流式数据

### 2. 基本用法

```javascript
const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
};
```

## 请求配置

### 1. 请求方法

```javascript
// GET请求
fetch('https://api.example.com/users');

// POST请求
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john@example.com',
  }),
});

// PUT请求
fetch('https://api.example.com/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John Updated',
  }),
});

// DELETE请求
fetch('https://api.example.com/users/1', {
  method: 'DELETE',
});
```

### 2. 请求头设置

```javascript
const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer your-token-here');

fetch('https://api.example.com/data', {
  headers: headers,
});

// 或者直接使用对象
fetch('https://api.example.com/data', {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token-here',
  },
});
```

## 响应处理

### 1. 响应类型

```javascript
const handleResponse = async (response) => {
  // 检查响应状态
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

// 根据内容类型处理响应
  const contentType = response.headers.get('content-type');
  if (contentType?.includes('application/json')) {
    return response.json();
  } else if (contentType?.includes('text/plain')) {
    return response.text();
  } else if (contentType?.includes('application/octet-stream')) {
    return response.blob();
  }
};
```

### 2. 错误处理

```javascript
const fetchWithErrorHandling = async (url, options = {}) => {
  try {
    const response = await fetch(url, options);
    
    if (!response.ok) {
      // 处理HTTP错误
      if (response.status === 404) {
        throw new Error('Resource not found');
      } else if (response.status === 401) {
        throw new Error('Unauthorized');
      } else if (response.status === 403) {
        throw new Error('Forbidden');
      } else {
        throw new Error('Network response was not ok');
      }
    }

return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error('Request was aborted');
    } else if (error.name === 'TypeError') {
      throw new Error('Network error');
    }
    throw error;
  }
};
```

## 高级特性

### 1. 请求超时

```javascript
const fetchWithTimeout = async (url, options = {}, timeout = 5000) => {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);

try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal,
    });
    clearTimeout(id);
    return response;
  } catch (error) {
    clearTimeout(id);
    if (error.name === 'AbortError') {
      throw new Error('Request timeout');
    }
    throw error;
  }
};
```

### 2. 请求重试

```javascript
const fetchWithRetry = async (url, options = {}, retries = 3) => {
  let lastError;

for (let i = 0; i < retries; i++) {
    try {
      return await fetch(url, options);
    } catch (error) {
      lastError = error;
      // 等待一段时间后重试
      await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, i)));
    }
  }

throw lastError;
};
```

### 3. 并发请求

```javascript
const fetchConcurrent = async (urls) => {
  try {
    const promises = urls.map(url => fetch(url));
    const responses = await Promise.all(promises);
    return await Promise.all(responses.map(res => res.json()));
  } catch (error) {
    console.error('Error fetching concurrent requests:', error);
    throw error;
  }
};
```

## 最佳实践

### 1. API客户端封装

```javascript
class ApiClient {
  constructor(baseURL) {
    this.baseURL = baseURL;
  }

async request(endpoint, options = {}) {
    const url = `${this.baseURL}${endpoint}`;
    const headers = {
      'Content-Type': 'application/json',
      ...options.headers,
    };

const config = {
      ...options,
      headers,
    };

try {
      const response = await fetchWithTimeout(url, config);
      return await handleResponse(response);
    } catch (error) {
      handleError(error);
    }
  }

async get(endpoint, options = {}) {
    return this.request(endpoint, { ...options, method: 'GET' });
  }

async post(endpoint, data, options = {}) {
    return this.request(endpoint, {
      ...options,
      method: 'POST',
      body: JSON.stringify(data),
    });
  }

async put(endpoint, data, options = {}) {
    return this.request(endpoint, {
      ...options,
      method: 'PUT',
      body: JSON.stringify(data),
    });
  }

async delete(endpoint, options = {}) {
    return this.request(endpoint, { ...options, method: 'DELETE' });
  }
}
```

### 2. 请求拦截器

```javascript
const createFetchWithInterceptors = () => {
  const requestInterceptors = [];
  const responseInterceptors = [];

const addRequestInterceptor = (interceptor) => {
    requestInterceptors.push(interceptor);
  };

const addResponseInterceptor = (interceptor) => {
    responseInterceptors.push(interceptor);
  };

const fetchWithInterceptors = async (url, options = {}) => {
    let modifiedOptions = { ...options };

// 应用请求拦截器
    for (const interceptor of requestInterceptors) {
      modifiedOptions = await interceptor(modifiedOptions);
    }

try {
      let response = await fetch(url, modifiedOptions);

// 应用响应拦截器
      for (const interceptor of responseInterceptors) {
        response = await interceptor(response);
      }

return response;
    } catch (error) {
      throw error;
    }
  };

return {
    fetch: fetchWithInterceptors,
    addRequestInterceptor,
    addResponseInterceptor,
  };
};
```

## 性能优化

1. 缓存策略
   - 使用HTTP缓存头
   - 实现本地缓存
   - 避免重复请求

2. 请求优化
   - 合并请求
   - 使用分页
   - 实现请求取消

3. 错误处理
   - 统一错误处理
   - 错误重试机制
   - 友好的错误提示

## 调试技巧

1. 网络监控
   - 使用Chrome DevTools
   - 使用React Native Debugger
   - 实现请求日志

2. 错误排查
   - 检查网络连接
   - 验证请求参数
   - 分析响应数据

## 参考资源

- [Fetch API文档](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
- [React Native网络请求](https://reactnative.dev/docs/network)
- [HTTP协议规范](https://developer.mozilla.org/en-US/docs/Web/HTTP)

## 总结

通过本文的学习,你应该已经掌握了:

1. Fetch API的基本用法
2. 请求配置和响应处理
3. 高级特性的使用方法
4. 性能优化和调试技巧
5. 最佳实践和常见问题解决方案

在实际开发中,合理使用Fetch API可以帮助你构建高效、可靠的网络请求层。建议根据具体需求选择合适的实现方式,并注意遵循最佳实践。