React fetch发送请求

在React中，可以使用内置的fetch函数发送HTTP请求。fetch函数提供了一种现代的、基于Promise的方式来处理异步数据请求。

使用fetch发送请求的步骤

以下是使用fetch发送请求的一般步骤：

1. 构造请求：使用fetch函数创建一个请求对象，指定请求的URL、方法、头部、主体等。
2. 发送请求：使用fetch函数发送请求，并返回一个Promise对象，该对象在请求完成后将解析为响应对象。
3. 处理响应：通过对响应对象调用相应的方法（如json()、text()、blob()等）来解析响应数据。
4. 处理错误：使用Promise的catch方法捕获请求过程中发生的错误，并进行错误处理。

现在，让我们通过一个示例来演示在React中使用fetch发送请求的过程。

示例

class MyComponent extends React.Component {
  componentDidMount() {
    // 发送GET请求
    fetch('https://api.example.com/data')
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('请求失败');
        }
      })
      .then(data => {
        // 处理响应数据
        console.log(data);
      })
      .catch(error => {
        // 处理错误
        console.error(error);
      });
  }

  render() {
    return <div>正在加载数据...</div>;
  }
}

在上面的示例中，我们在组件的componentDidMount生命周期方法中使用fetch发送了一个GET请求到https://api.example.com/data。然后，我们使用.then方法处理成功的响应，并通过.catch方法捕获任何错误。

在请求的回调函数中，我们首先检查响应对象的ok属性，以确定请求是否成功。如果成功，我们调用json()方法来解析响应数据，并在解析完成后处理数据。如果请求失败，我们抛出一个错误，然后在.catch块中捕获并处理。

此外，为了在请求过程中提供用户反馈，我们在组件的渲染方法中显示一个加载提示信息。