前端发送fetch请求

### 使用 Fetch API 发送 HTTP 请求

#### GET 请求示例
为了获取资源，可以使用 `GET` 方法。下面展示了如何通过 JavaScript 的 Fetch API 获取数据：

async function fetchData(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log(data); // 处理返回的数据
    } catch (error) {
        console.error('Fetch failed:', error);
    }
}

此函数接收 URL 参数并尝试从中检索 JSON 数据[^1]。

#### POST 请求示例
当需要向服务器提交数据时，则应采用 `POST` 方法。这里展示了一个 React 组件内的实现方式来发送带有请求体的 `POST` 请求：

import React, { useState } from 'react';

function PostRequestComponent() {
    const [data, setData] = useState(null);

    async function postData(url = '', body = {}) {
      // 默认选项都是 * 后面会覆盖这些默认值
      const response = await fetch(url, {
          method: 'POST', 
          headers: {
              'Content-Type': 'application/json'
          },
          body: JSON.stringify(body), 
      });
      
      return response.json(); 
    }

    const handleSubmit = () => {
        postData('/api/endpoint', { exampleKey: "exampleValue" })
            .then((returnedData) => {
                setData(returnedData);
            });
    };

    return (
        <div>
            {/* 渲染组件 */}
            <button onClick={handleSubmit}>Submit</button>
        </div>
    );
}

export default PostRequestComponent;

上述代码片段定义了一个名为 `PostRequestComponent` 的 React 函数式组件，在点击按钮后它将调用 `postData()` 来发起一个包含自定义负载对象 `{ exampleKey: "exampleValue" }` 的 `POST` 请求到 `/api/endpoint` 路径下[^2]。