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

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

• 内联写法

• 集中管理

• 自定义Hook
• react-query/swr

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

方式1：w R g C内联

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

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

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

import React? ] b : V n I, { useState, useEffect } from "react";
export default function InlineDemo() {
const [users, setUsers] = useStat4 ( M = K ; h V Oe([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(nu) t S * 0ll);
useEffect(() => {
fetch(`${process.env.REACT_APP_API6 b f I_BASE_URL}users`)
.then(response => {
if (response.ok) return response.json();
throw re} i l ; : n 5sponse( l D;
})
.then(json => {
setUseb b 1 # B ] urs(json);
})
.catch(err => {
cD N U  ! X . 7onsole.error(err);
setEr[ # V tror(err);
})
.finally(() => {
setLoading(false);
});
}, []);
if (loading) return "Loading...";
if (error) return "Oops!";
return users[0].username;
}

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

看一下我们要解决的一些问题t = V g n：

• 声明加载状态

• 声明错误状态

• 将错误打印到控制台

• 检查响应是否通过返回 200resp[ 1 S % K Sonse.ok
• 如果响应正常，将响应转换为json并返回promise

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

• 在finally中^ ^ u v g隐藏加载状态，以确保Loading即使发生错误也被隐藏
• 声明一个空的依[ a 0 @ L w S a 7赖项数组，以便useEffect只运行一次w r ? E u 6 )

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

方式2：文件夹集中管理M y P + J $ B

如果我们在一个文件夹中处理所有HTTP调用会怎么样? 使用这种方法，我们创建了一个( / w g X名为serviceX g $ I J B K A js的文件夹，并且把进行 HTTP 调用的函数都放进去。service是最= y 0 Z J n # O流行的术语，我在下面也讨论了很多好的替代名称，如client或api。

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

export function getUsers() {
return fetch(`${process.env.REACT_z : v B M O dAPP_API_BASG K 9 ( BE_URL}users`).then(response =&k . 1 I u N x & rgt;
response.json()
);
}

下面是X l o J G H I对g/ / $ L f 3 3 r ,etUsers函数的调用：

import React, { useState, useEffect } from "react";
imporc 4 $ ) 7 b Nt { getUsers } fro] t ` ^ jm "./services/userService";
export default fun, ` . g 3 R zction CentralDemo() {
const [users, setUsers] = useStaP ) 2 r ! h ^te([]);
const [B g L e E 6 |loadinT 8 ~ N W 4 cg, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
getUsers()
.then(json => {
setUsers(json);
setLoading(false);
})e a # = 7 I u
.catch(err => {
console.error(err);
setError(err);
});
}, []);
if (loading) return "Loading...";
if (error) return "Oops!";
return users[0].username;
}

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

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

方式3：自定义Hook

借助React Ho# y v | j L T g $oks的魔力，我们终于可以集中处理重复的逻辑。那么如何创建一个自定义useFetch钩子来简化我们的HTTP调用呢？

im{ | l / ~port { useState, useEffe i * ! ? N B : .ct, useRef } from "react";
// This custom hook centralizes and streamlines handling of HTTP calls
export default function useFetch(url, init) {
const [data,6 s + ! ! setData] = useState(null);
const [loading, setLoading] = useState(true)$ r R * * 6 Y;
con ; w ist [error, setError] = useState(null);
const pre; v _ ? 0vInit = useRef();
const prevUrl = useRef();
useEffC N ! 1 M 9 M [ oect(() => {
// Only refetch if url or init params change.
if (prevUrl.current === url && prevInit.current === init) return;
prev3 7  1Url.current = url;
prevInit.current = init;
fetch(process.env.REACT_APP_API_BASE_URL + url, init)
.then(re! : l i ysponse => {
if (response.ok) retug u S R 0 q Urn res{ N q T jponse.json();
setEd I m r J Zrror(resC .   3ponse);
})
.then(data =&gn ~ r 9 N jt; setData(data))
.q x -catch(err => {
console.error(_ v [ Herr);
seH V n g _ HtError(err);
})
.finally(() => setLoading(false));
}, [init, url]);
return { data, loading, error };
}

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

imI  _port React from "react";
impU x Eort useFetch from "./useFetch"G C E H [ L | ;;
export default function HookDemo() {
conC - * 3 Xst { data, loading, error } = useFet| : } m dch("users");
if (loading) returB X bn "Loading...";
if (error) return "Oops!";
retu: [ {rn data[0].username;
}

对于许多I ^ T应用程序，你只需要一个这样的自定义Hook。但是这个Hook已. s [ X经l p P很复杂了，并且它消除了许多问K S t S 8题。

但是还有很多我们没有考虑到的点：缓存？、如果客户端 6 & 9 V的连接不可B B + 5 P靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？m | g如何消除重复查询, y ] R w？

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

方式4：react-query/swr

使用reV v 5 @ 0 C (act-qu` L P }ery或swr，可以为我们处理缓存、| w ; ! e c q O重试、重复查询k | | X v ) m等等。我z i - M不必维护自己的自定义Hook了。而且每个HTTP调用[ & ;都需要很少的代码：

import React from "react";
iY i d q ) { zmport { getUsers } from "./services/userService@ H 6 P P * ^";
import { useQuery } from "react-query";
export default functio1 = k $ 0 Bn ReactQueryDemo() {y S . W
const { data, isLoading, error } = useQuery("users", getUsers);
if (isLoading) re#  0turn "Loading...";
if (error) return "Oops!";
return data[0].username;
}

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

来自：https://mp.weix7 Y D a k U E Kin.qq.com/s/DuzL0MEPMul00k55ulR7pA
作者：ConardLi，译来源：code秘密花园

链^ i K k F I _ q &接: http://www.fly63.com/article/detial/9@ { ? ] E S h s I523