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
是最流行的术语,我在下面也讨论了很多好的替代名称,如 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
调用的函数,那么我可以很容易地确保它们始终如一地这样做。此外,如果调用被复用,则很容易从这个集中位置调用它们。
然而,我们还可以做得更好。
方式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/
- 【Java学习笔记之三十二】浅谈Java中throw与throws的用法及异常抛出处理机制剖析
- Linux上访问SQL Server数据库
- 2017 Multi-University Training Contest - Team 9 1001&&HDU 6161 Big binary tree【树形dp+hash】
- 【Java学习笔记之三十三】详解Java中try,catch,finally的用法及分析
- 【Java学习笔记之二十九】Java中的"equals"和"=="的用法及区别
- NET跨平台:在Ubuntu下搭建ASP.NET 5开发环境
- 【Code】关关的刷题日记22——Leetcode 53. Maximum Subarray
- 【Java学习笔记之三十四】超详解Java多线程基础
- Codeforces 842B Gleb And Pizza【几何,水】
- Python3希尔排序
- Codeforces 842A Kirill And The Game【暴力,水】
- Wannafly模拟赛 A.矩阵(二分答案+hash)
- 【Java数据结构学习笔记之一】线性表的存储结构及其代码实现
- Comparison of Apache Stream Processing Frameworks: Part 1
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [白话解析] 通俗解析集成学习之bagging,boosting & 随机森林
- [源码分析] 带你梳理 Flink SQL / Table API内部执行流程
- 从"UDF不应有状态" 切入来剖析Flink SQL代码生成
- [源码分析]从"UDF不应有状态" 切入来剖析Flink SQL代码生成 (修订版)
- [白话解析] 通俗解析集成学习之GBDT
- [源码解析]为什么mapPartition比map更高效
- [记录点滴]Redis实现简单消息队列
- [源码解析] Flink的groupBy和reduce究竟做了什么
- [记录点滴]在Ionic和Android中上传Blob图片
- [源码解析] GroupReduce,GroupCombine 和 Flink SQL group by
- [记录点滴] 小心 Hadoop Speculative 调度策略
- [白话解析] 通过实例来梳理概念 :准确率 (Accuracy)、精准率(Precision)、召回率(Recall)和F值(F-Measure)
- [记录点滴] OpenResty中Redis操作总结
- [源码解析] 从TimeoutException看Flink的心跳机制
- [记录点滴] 一个解决Lua 随机数生成问题的办法