西昌规划和建设局网站,长沙网络营销公司哪家好,亚马逊紫鸟超级浏览器,网站显示百度地图一、前言 数据获取是任何 react 应用程序的核心方面。对于 React 开发人员来说#xff0c;了解不同的数据获取方法以及哪些用例最适合他们很重要。 但首先#xff0c;让我们了解 JavaScript Promises。 简而言之#xff0c;promise 是一个 JavaScript 对象#xff0c;它将…一、前言 数据获取是任何 react 应用程序的核心方面。对于 React 开发人员来说了解不同的数据获取方法以及哪些用例最适合他们很重要。 但首先让我们了解 JavaScript Promises。 简而言之promise 是一个 JavaScript 对象它将在未来的某个时间产生一个值。这通常适用于异步操作例如数据获取。 Promises具有三种状态 Pending承诺仍在进行中的地方Fulfilled承诺成功解决并返回值的地方Rejected承诺因错误而失败 如果一个promise被Fulfilled或Rejected它就被解决了。Promise 有不同的方法来根据结果做不同的事情。下一节将更详细地讨论这些方法。 二、使用 Promise 方法获取 api Fetch API 提供了一个全局的 fetch() 方法使开发人员能够以直接的方式获取数据。在 fetch() 之前传统方法是使用 XMLHttpRequest()。本文不涉及此方法因为 fetch() 已被更强大、更灵活的功能集所取代。 fetch() 方法接受一个参数即要请求的 URL并返回一个promise。第二个可选参数options 是一个属性数组。fetch() 的返回值可以是 JSON 或 XML对象数组或单个对象。如果没有选项参数fetch() 将始终发出 GET 请求。 第一种方法是您通常会在简单的数据获取用例中看到的方法并且通常是浏览 API 文档时的第一个结果。 如前所述我们从返回狗的随机图像的 API 获取数据并将该图像呈现在屏幕上。在发出请求之前我们将代码包装在一个带有空依赖项数组的 useEffecthook 中以便 fetch() 方法仅在组件最初安装时运行。 useEffect(() {fetch(URL)// syntax for handling promises.then((res) {// check to see if response is okayif (res.ok) {// if okay, take JSON and parse to JavaScript objectreturn res.json();}throw res;})// .json() returns a promise as well.then((data) {console.log(data);// setting response as the data statesetData(data);})// if res is not okay the res is thrown here for error.catch((err) {console.error(Error: ${err});// setting the error statesetError(err);})// regardless if promise resolves successfully or not we remove loading state.finally(() {setLoading ( false );});}, []); 在上例中我们调用该方法并传入 API 端点的 URL。在这个方法中我们使用 promise 对象的方法回想一下返回一个 promise。 我们使用这个方法并传入一个回调函数来检查响应是否正常。如果响应正常我们将获取返回的 JSON 数据并使用该方法将其解析为 JavaScript 对象。如果响应不正常我们就会报错。 由于 .json() 方法也返回一个承诺我们可以链接另一个 .then() 并传递一个函数来设置数据的状态然后在组件的其他地方使用。在我们的示例中外部 API 返回一个具有 url 属性的对象它将用作 srcour 图像。 继续通过链下一部分是 .catch() 以安排在承诺被拒绝时调用的函数。这也返回另一个承诺然后我们可以链接 .finally() 无论承诺是否已解决解决或拒绝它都会被调用。 这种 .finally() 方法使我们能够避免在 .then() 和 .catch() 中重复代码使其成为我们示例中删除加载状态的好地方。 三、带有 Promise 方法的库 Axios Axios 是一个流行的 HTTP 客户端库用于高效的数据获取。它可以通过 npm 或其他包管理器轻松安装到 React 应用程序中。使用 Axios 是 Fetch API 的替代方法如果您不介意安装外部库它有一些优势。 第二个示例将非常接近第一个示例的代码使用相同的 promise 方法来处理 promise 状态和响应。 在 fetch() 将 Axios 库导入我们的组件之后我们可以使用 axios.get() 一种可以将 URL 传递到我们的外部 API 端点的方法。 这将返回一个 Promise因此我们可以采用与 Promise 方法链接相同的方法。 useEffect(() {axios.get(URL)// syntax for handling promises.then((res) {console.log(res.data);// axios converts json to object for us (shortens our code)setData(res.data);})// axios takes care of error handling for us instead of checking manually.catch((err) {console.error(Error: ${err});// setting the error statesetError(err);})// regardless if promise resolves successfully or not we remove loading state.finally(() {setLoading ( false );});}, []); Fetch API 的代码与此 Axios 方法之间的明显区别在于使用 Axios 我们只需要一个因为 Axios 为我们将 .then()JSON 转换为 JavaScript 对象缩短了我们的代码。 另外我们不再写条件来手动抛出错误因为axios会为你抛出400和500范围的错误再次缩短我们的代码。 四、异步函数async/await 在此示例中我们将放弃在前两个示例中使用的承诺链而是引入一种更现代的方法来编写异步的、基于承诺的代码。 这种方法可以与您选择的任何抓取机制一起使用但对于本示例我们将坚持使用 Axios 库。 第三个示例与前一个示例类似的方式设置组件方法是导入 Axios 库然后使用一个空的 dependencies 数组包装用于在 useEffecta 中获取数据的代码。 在 useEffect 中我们使用关键字 async 创建一个异步函数然后在该函数中我们有三个独立的部分 - try、catch 和 finally。 这种 try/catch 方法用于处理 JavaScript 中的错误。try块内的代码首先被执行如果抛出任何错误它们将被“捕获”在块中catch并执行内部代码。 最后finallyblock 将始终在流通过 try/catch 之后执行。 useEffect(() {// create async function b/c cannot use async in useEffect arg cbconst fetchData async () {// with async/await use the try catch block syntax for handlingtry {// using await to make async code look sync and shorten const res await axios.get(URL);setData(res.data);} catch (err) {console.error(Error: ${err});// setting the error statesetError(err);} finally {setLoading ( false );}};fetchData ();}, []); 在此示例中try 块创建了一个名为 resresponse 的缩写的变量该变量使用 async 关键字。这允许代码看起来同步更短更容易在眼睛上。 在此示例中axios.get(URL) 正在“等待”直到它稳定下来。如果承诺得到履行那么我们将数据设置为状态。如果承诺被拒绝抛出错误它会进入 catch 块。 五、创建一个“useFetch”自定义 React Hook 第四种方法是创建我们自己的自定义 React 钩子调用 useFetchit 可以在我们应用程序的不同组件中重复使用并从每个组件中删除笨重的获取代码。 这个例子实际上只是采用第四个例子使用 Axios 库和 async/await 的相同技术并将该代码移动到它自己的自定义钩子中。 为此我们创建了一个名为 useFetch.js 的函数。然后我们使用 Effect 将前面示例中的所有代码以及我们正在跟踪的不同状态添加到函数 useFetch 中。 最后这个函数将返回一个包含每个状态的对象然后在调用钩子的地方使用 useFetchaccessed。我们的 useFetchhook 还将接受一个参数即 URL 以允许更多的可重用性和向不同端点发出提取请求的可能性。 const useFetch (url) {const [data, setData] useState(null);const [ loading , setLoading ] useState ( true );const [error, setError] useState(null);useEffect(() {// create async function b/c cannot use asyc in useEffect arg cbconst fetchData async () {// with async/await use the try catch block syntax for handlingtry {// using await to make async code look sync and shortenconst res await axios.get(url);setData(res.data);} catch (err) {console.error(Error: ${err});// setting the error statesetError(err);} finally {setLoading ( false );}};fetchData ();}, []);return {data,loading,error,}; }; 最后我们将这个新的自定义钩子导入到将使用它的组件中并像调用任何其他 React 钩子一样调用它。如您所见这极大地提高了代码的可读性并缩短了我们的组件。 这种方法的最后一点是您还可以安装外部库而不是创建您自己的自定义挂钩。一个流行的库 react-fetch-hook 与我们刚刚构建的钩子具有非常相似的功能。 六、React 查询库 在 React 中获取数据的最现代和最强大的方法之一是使用 React Query 库。除了简单的数据获取之外它还有许多功能但是对于这个例子我们将学习如何从同一个示例外部 API 中简单地获取数据。 安装和导入后React Query 提供了许多自定义挂钩可以以非常干净的方式在我们的组件中重复使用。 在此示例中我们从中导入 QueryClient然后使用提供程序包装我们的应用程序并将 QueryClientProvider 实例作为属性传递给包装器。 这使我们能够在我们的应用程序中使用该库。 为了发出这个简单的 GET 请求我们导入并使用了 useQueryhooks。与前面使用自定义挂钩的示例不同我们传入了两个参数。 第一个必需参数是 queryKey 用作此特定查询的参考键。 第二个必需参数是 queryFn 它是查询将用于请求数据的函数。 我们将使用此查询函数然后使用 Fetch API 和 promise 方法语法进行初始提取而不是像我们之前的自定义挂钩示例中那样只传递一个简单的 URL。这个钩子有许多其他可选参数。 const { isLoading, error, data } useQuery(dogData, () fetch(URL).then((res) res.json())); isLoading 从这里开始React Query 将在幕后完成所有额外的工作在这种情况下我们可以从这个钩子调用 destructure 、 error 和 use data in our application尽管我们也可以访问许多其他值。 在比我们当前的 Dog Image API 示例更大的示例中使用 React Query 的力量和优势是显而易见的。需要提及的一些附加功能包括缓存、在后台更新“陈旧”数据以及其他与性能相关的优势。 七、Redux 工具包 RTK 查询 本文最后一种方法是使用Redux Toolkit的RTK Query进行数据采集。应用程序使用 Redux 进行状态管理是很常见的。 如果您的公司或您当前的副项目目前正在使用 Redux一个不错的选择是使用 RTK 查询来获取数据因为它提供了与 React 查询类似的简单性和优势。 要在存储 Redux 代码的任何地方开始使用 RTK 查询请创建一个 rtkQueryService.js 文件来设置数据获取。 创建后您将服务添加到您的 Redux 商店假设您已经在使用 Redux您将已经拥有一个包含您的应用程序的 Providerstore 组件。 从这里开始它与使用带有 React Query 方法的自定义钩子非常相似您导入然后使用查询钩子并解构数据错误然后是 Loading 可以在您的组件中使用。 const { data, error, isLoading } useGetDogQuery(); 如您所见Redux 有很多设置因此这可能不是我们用例的最佳方法但如果您已经在 React 应用程序中使用 Redux 并且想要一种简单而现代的获取数据的方式RTK 查询 可能很棒很有价值这也提供了缓存等好处。 最后的想法 如果你已经看到了这里那么恭喜你这篇文章的目的就是为那些学习 React 的人介绍一些不同的数据获取方法。 在这篇文章中我介绍了6种方法希望这6种方法对你有用也希望你能从中学习到一些新东西。 此外还有其他当前的数据获取方法未在此文章中提及我相信随着 React 生态系统的发展其他方法将会出现。也就是说我相信本文为理解该领域提供了坚实的基础。