专栏首页code秘密花园React 中请求远程数据的四种方法

React 中请求远程数据的四种方法

React 是一个专注的组件库。因此,它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API,可以考虑下面四种方法。

  • 内联写法
  • 集中管理
  • 自定义 Hook
  • react-query/swr

注意:在本文中,我将使用 fetch 进行 HTTP 调用,但是这些模式也适用于 Axios 之类的替代方法。另外,如果你使用的是 GraphQ L,还可以考虑使用 Apollo 之类的其他不错的选择。这篇文章假设你正在调用传统的 REST API。

方式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 是最流行的术语,我在下面也讨论了很多好的替代名称,如 clientapi

要点是,所有的 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 调用的函数,那么我可以很容易地确保它们始终如一地这样做。此外,如果调用被复用,则很容易从这个集中位置调用它们。

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

方式3:自定义Hook

借助 React Hooks 的魔力,我们终于可以集中处理重复的逻辑。那么如何创建一个自定义 useFetch 钩子来简化我们的 HTTP 调用呢?

import { useState, useEffect, useRef } from "react";
// This custom hook centralizes and streamlines handling of HTTP calls
export default function useFetch(url, init) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const prevInit = useRef();
  const prevUrl = useRef();

  useEffect(() => {
  // Only refetch if url or init params change.
    if (prevUrl.current === url && prevInit.current === init) return;
    prevUrl.current = url;
    prevInit.current = init;
    fetch(process.env.REACT_APP_API_BASE_URL + url, init)
      .then(response => {
        if (response.ok) return response.json();
        setError(response);
      })
      .then(data => setData(data))
      .catch(err => {
        console.error(err);
        setError(err);
      })
      .finally(() => setLoading(false));
  }, [init, url]);

  return { data, loading, error };
}

你的可能看起来不一样,但我发现这个基本的使用方法很有用。这个 Hook 极大地简化了所有调用。看看使用这个 Hook 需要多少代码 :

import React from "react";
import useFetch from "./useFetch";

export default function HookDemo() {
  const { data, loading, error } = useFetch("users");
  if (loading) return "Loading...";
  if (error) return "Oops!";
  return data[0].username;
}

对于许多应用程序,你只需要一个这样的自定义Hook。但是这个Hook已经很复杂了,并且它消除了许多问题。

但是还有很多我们没有考虑到的点:缓存?、如果客户端的连接不可靠,如何重新获取?你想在用户重新调整标签时重新获取新数据吗?如何消除重复查询?

你可以不断完善这个自定义Hook来完成所有这些操作。但是,您应该只需要方式4:

方式4:react-query/swr

使用 react-query或swr,可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。而且每个 HTTP 调用都需要很少的代码:

import React from "react";
import { getUsers } from "./services/userService";
import { useQuery } from "react-query";

export default function ReactQueryDemo() {
  const { data, isLoading, error } = useQuery("users", getUsers);
  if (isLoading) return "Loading...";
  if (error) return "Oops!";
  return data[0].username;
}

对于大多数应用程序来说,今天这是我的首选。这是完整的代码:https://codesandbox.io/s/4-ways-to-handle-restful-http-in-react-k3xug,你可以自己进行比较。

你是怎么处理 HTTP 调用的呢?欢迎和我讨论~

了解更多信息请戳:https://www.bitnative.com/2020/07/06/four-ways-to-fetch-data-in-react/

本文分享自微信公众号 - code秘密花园(code_mmhy),作者:ConardLi译

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES10新特性(二)

    此更新修复了字符 U+D800 到 U+DFFF 的处理,有时可以进入 JSON 字符串。 这可能是一个问题,因为 JSON.stringify 可能会将这些数...

    ConardLi
  • Airbnb JavaScript 风格指南(一)

    ConardLi
  • 用JS开发跨平台桌面应用,从原理到实践

    使用Electron开发客户端程序已经有一段时间了,整体感觉还是非常不错的,其中也遇到了一些坑点,本文是从【运行原理】到【实际应用】对Electron进行一次系...

    ConardLi
  • React 中请求远程数据的四种方法

    React 是一个专注的组件库。因此,它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API,可以考虑下面四种方法。

    前端劝退师
  • C++版 - Leetcode 28.Implement strStr() 解题报告【C库函数strstr()模拟-字符串中子串首次出现的地址】

    提交网址 https://leetcode.com/problems/implement-strstr/

    Enjoy233
  • 了不起的 Deno 实战教程

    对 Deno 还不了解的读者,建议先阅读本人 “了不起的 Deno 入门教程” 这篇文章。

    山月
  • 了不起的 Deno 实战教程

    相信接触过 Node.js 的读者对 Express、Hapi、Koa 这些 Web 应用开发框架都不会陌生,在 Deno 平台中如果你也想做 Web 应用开发...

    阿宝哥
  • 【Deno】600- 了不起的 Deno 实战教程

    对 Deno 还不了解的读者,建议先阅读本人 “了不起的 Deno 入门教程” 这篇文章。

    pingan8787
  • 用 Node + MySQL 如何处理 100G 数据

    通过这个 Node.js 和 MySQL 示例项目,我们将看看如何有效地处理 数十亿行 占用 数百GB 存储空间的数据。

    烂猪皮
  • 用 Node + MySQL 处理 100G 数据

    通过这个 Node.js 和 MySQL 示例项目,我们将看看如何有效地处理 数十亿行 占用 数百GB 存储空间的数据。

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券