React Native 网络请求与数据处理：Fetch API 使用教程

在现代移动应用开发中，网络请求是不可或缺的一部分。React Native 提供了一个内置的 Fetch API，使得我们能够轻松地进行网络请求并处理数据。在本教程中，我们将深入探讨 Fetch API 的使用，包括其优缺点、注意事项以及丰富的示例代码。

1. Fetch API 概述

Fetch API 是一个用于进行网络请求的 JavaScript API，基于 Promise 设计，提供了更强大的功能和更简洁的语法。它可以用于发送 GET、POST、PUT、DELETE 等 HTTP 请求，并处理响应。

优点

基于 Promise：支持异步编程，避免了回调地狱。
灵活性：支持多种请求方法和自定义请求头。
易于使用：语法简洁，易于理解和使用。

缺点

不支持 IE：Fetch API 在某些旧版浏览器中不被支持，虽然在 React Native 中没有这个问题，但在 Web 开发中需要注意。
错误处理：Fetch API 只会在网络错误时拒绝 Promise，而不会在 HTTP 错误状态（如 404 或 500）时拒绝。

2. 基本用法

2.1 发送 GET 请求

下面是一个简单的示例，展示如何使用 Fetch API 发送 GET 请求。

import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

const FetchExample = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  if (error) {
    return <Text>Error: {error.message}</Text>;
  }

  return (
    <View>
      {data.map(post => (
        <Text key={post.id}>{post.title}</Text>
      ))}
    </View>
  );
};

export default FetchExample;

2.2 发送 POST 请求

发送 POST 请求时，我们需要在 fetch 函数中传递一个配置对象，指定请求方法和请求体。

const postData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        title: 'foo',
        body: 'bar',
        userId: 1,
      }),
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.error('Error:', error);
  }
};

postData();

3. 处理响应

3.1 JSON 数据

如上所示，我们可以使用 response.json() 方法将响应体解析为 JSON 格式。这个方法返回一个 Promise，因此我们可以使用 then 方法来处理解析后的数据。

3.2 文本数据

如果我们需要处理文本数据，可以使用 response.text() 方法。

const fetchTextData = async () => {
  try {
    const response = await fetch('https://example.com/some-text');
    const text = await response.text();
    console.log(text);
  } catch (error) {
    console.error('Error:', error);
  }
};

fetchTextData();

4. 错误处理

在使用 Fetch API 时，错误处理是一个重要的环节。我们可以通过检查响应的状态码来判断请求是否成功。

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

5. 注意事项

CORS：在进行跨域请求时，确保服务器支持 CORS（跨源资源共享），否则请求将被阻止。
请求头：根据 API 的要求设置适当的请求头，特别是在发送 JSON 数据时，通常需要设置 Content-Type 为 application/json。
超时处理：Fetch API 本身不支持超时处理，可以通过 Promise.race 来实现。

const fetchWithTimeout = (url, options, timeout = 5000) => {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Request timed out')), timeout)
    ),
  ]);
};

6. 总结

Fetch API 是 React Native 中进行网络请求的强大工具。通过本教程，我们学习了如何发送 GET 和 POST 请求，处理响应数据，以及如何进行错误处理。尽管 Fetch API 有其优缺点，但它的灵活性和易用性使其成为开发者的首选。

在实际开发中，结合使用 Fetch API 和其他库（如 Axios）可以更好地满足不同的需求。希望本教程能帮助你更好地理解和使用 Fetch API，在 React Native 开发中游刃有余。