使用 Fetch API 进行数据请求

在现代 Web 开发中，前端与后端的交互是至关重要的。React 作为一个流行的前端库，提供了多种方式与后端进行数据交互，其中 Fetch API 是一种常用的方法。本文将详细介绍如何使用 Fetch API 进行数据请求，包括其优缺点、注意事项以及丰富的示例代码。

1. 什么是 Fetch API？

Fetch API 是一个现代的 JavaScript API，用于进行网络请求。它提供了一个简单的接口来获取资源，支持 Promise，因此可以使用 async/await 语法，使得异步代码更加清晰易读。

优点

基于 Promise：支持异步编程，避免了回调地狱。
灵活性：支持多种请求方法（GET、POST、PUT、DELETE等）。
可读性：代码结构清晰，易于理解和维护。

缺点

不支持 IE：Fetch API 在 Internet Explorer 中不被支持，需要使用 polyfill。
错误处理：Fetch API 只会在网络错误时拒绝 Promise，对于 HTTP 错误（如 404、500）仍然会被视为成功响应。

2. 基本用法

2.1 发送 GET 请求

下面是一个使用 Fetch API 发送 GET 请求的基本示例：

import React, { useEffect, useState } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

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

export default FetchExample;

2.2 发送 POST 请求

发送 POST 请求的示例代码如下：

const PostExample = () => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);

  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 result = await response.json();
      setResponse(result);
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    <div>
      <button onClick={postData}>Send POST Request</button>
      {response && <div>Response: {JSON.stringify(response)}</div>}
      {error && <div>Error: {error}</div>}
    </div>
  );
};

export default PostExample;

3. 注意事项

3.1 错误处理

如前所述，Fetch API 只会在网络错误时拒绝 Promise，因此需要手动检查响应的状态码。确保在处理响应时添加适当的错误处理逻辑。

3.2 CORS（跨域资源共享）

在进行跨域请求时，可能会遇到 CORS 问题。确保后端服务器设置了正确的 CORS 头，以允许来自不同源的请求。

3.3 请求取消

Fetch API 本身不支持请求取消，但可以使用 AbortController 来实现这一功能。以下是一个示例：

const CancelableFetchExample = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const controller = new AbortController();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
          signal: controller.signal,
        });
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      controller.abort(); // 组件卸载时取消请求
    };
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

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

export default CancelableFetchExample;

4. 总结

Fetch API 是与后端进行数据交互的强大工具，具有简单易用的特点。通过本文的示例和注意事项，您应该能够在 React 应用中有效地使用 Fetch API 进行数据请求。尽管 Fetch API 有其局限性，但通过适当的错误处理和请求管理，您可以构建出高效且可靠的网络请求逻辑。

希望这篇教程能帮助您更好地理解和使用 Fetch API！