react怎样请求数据

react请求数据的方法：

方式1：内联

这是最简单，最直接的选择。在 React 组件中进行 HTTP 调用并处理响应。

fetch("/users").then(response => response.json());

看起来很简单。但是这个示例忽略了加载状态，错误处理，声明和设置相关状态等。在现实世界中， HTTP 调用看起来更像这样。

import React, { useState, useEffect } from "react";
export default function InlineDemo() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    fetch(`${process.env.REACT_APP_API_BASE_URL}users`)
      .then(response => {
        if (response.ok) return response.json();
        throw response;
      })
      .then(json => {
        setUsers(json);
      })
      .catch(err => {
        console.error(err);
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);
  if (loading) return "Loading...";
  if (error) return "Oops!";
  return users[0].username;
}

对于一个简单的应用程序，只要发起几个请求，就可以正常工作。但是上面的状态声明和 useEffect 都是模版。如果我要进行许多 HTTP 调用，我不想为每个调用重复和维护大约 20 行代码。内联调用让你的代码变得很丑。

看一下我们要解决的一些问题：

声明加载状态

声明错误状态

将错误打印到控制台

检查响应是否通过返回 200 response.ok

如果响应正常，将响应转换为 json 并返回 promise

如果响应不正确，抛出错误

在 finally 中隐藏加载状态，以确保 Loading 即使发生错误也被隐藏

声明一个空的依赖项数组，以便 useEffect 只运行一次

这只是一个简单的示例，它忽略了许多其他相关问题。

方式2：文件夹集中管理

如果我们在一个文件夹中处理所有 HTTP 调用会怎么样? 使用这种方法，我们创建了一个名为 services 的文件夹，并且把进行 HTTP 调用的函数都放进去。 service 是最流行的术语，我在下面也讨论了很多好的替代名称，如 client 或 api 。

要点是，所有的 HTTP 调用都是通过纯 JavaScript 函数处理的，存储在一个文件夹中。这是一个集中的 getUsers 函数:

export function getUsers() {
  return fetch(`${process.env.REACT_APP_API_BASE_URL}users`).then(response =>
    response.json()
  );
}

下面是对 getUsers 函数的调用：

import React, { useState, useEffect } from "react";
import { getUsers } from "./services/userService";
export default function CentralDemo() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    getUsers()
      .then(json => {
        setUsers(json);
        setLoading(false);
      })
      .catch(err => {
        console.error(err);
        setError(err);
      });
  }, []);
  if (loading) return "Loading...";
  if (error) return "Oops!";
  return users[0].username;
}

然而这并没有太简化请求调用。主要的好处是它可以强制一致地处理 HTTP 调用。其思想是这样的：当相关函数一起处理时，更容易一致地处理它们。如果 userService 文件夹中充满了进行 HTTP 调用的函数，那么我可以很容易地确保它们始终如一地这样做。此外，如果调用被复用，则很容易从这个集中位置调用它们。

然而，我们还可以做得更好。