React 和 Axios:API 调用初学者指南

wufei123 2024-06-02 阅读:23 评论:0
本教程将教您如何使用 Axios 获取数据,然后如何操作它并最终通过过滤功能将其显示在您的页面上。您将在此过程中学习如何使用映射、过滤器和包含方法。最重要的是,您将创建一个简单的加载器来处理从 API 端点获取的数据的加载状态。 1....

react 和 axios:api 调用初学者指南

本教程将教您如何使用 Axios 获取数据,然后如何操作它并最终通过过滤功能将其显示在您的页面上。您将在此过程中学习如何使用映射、过滤器和包含方法。最重要的是,您将创建一个简单的加载器来处理从 API 端点获取的数据的加载状态。

1. 设置项目

让我们在终端中使用 create-react-app 命令设置一个 React 项目:

npx create-react-app project-name

然后,通过终端窗口打开项目目录,输入 npm install axios 在本地为项目安装 Axios。

2.选择目标API

我们将使用随机用户生成器 API 来获取随机用户信息以在我们的应用程序中使用。

让我们将 Axios 模块添加到我们的应用程序中,方法是将其导入到我们的 App.js 文件中。

import axios from 'axios'

随机用户生成器 API 提供了一系列用于创建各种类型数据的选项。您可以查看文档以获取更多信息,但对于本教程,我们将保持简单。

我们想要获取十个不同的用户,我们只需要名字、姓氏和唯一的 ID,这是 React 创建元素列表时所需要的。另外,为了使调用更加具体,我们以国籍选项为例。

下面是我们将调用的 API URL:

https://randomuser.me/api/?results=10&inc=name,registered&nat=fr

请注意,我没有使用 API 中提供的 id 选项,因为它有时会为某些用户返回 null 。因此,为了确保每个用户都有一个唯一的值,我在 API 中包含了 registered 选项。

您可以将其复制并粘贴到浏览器中,您将看到返回的 JSON 格式的数据。

现在,接下来就是通过 Axios 进行 API 调用。

3. 创建应用程序状态

首先,让我们使用 React 中的 useState 挂钩创建状态,以便我们可以存储获取的数据。

在我们的 App 组件中,从 React 导入 useState 钩子,然后创建如下所示的状态。

import React, { useState } from "react"; import axios from "axios"; const App = () => { const [users, setUsers] = useState([]); const [store, setStore] = useState([]); return ( <div> </div> ); }; export default App;

在这里你可以看到 users 和 store 状态。一个将用于过滤目的,不会被编辑,另一个将保存将在 DOM 中显示的过滤结果。

4.使用axios获取数据

接下来我们需要做的是创建一个 getUsers 函数来处理数据的获取。在此函数中,我们使用 axios 使用 get 方法从 API 获取数据。

现在,为了在页面加载时显示我们获取的数据,我们将导入一个名为 useEffect 的 React hook,并在其中调用 getUsers 函数。

useEffect 钩子基本上管理功能组件中的副作用,它类似于 React 基于类的组件中使用的 componentDidMount() 生命周期钩子。该钩子接受一个空数组作为第二个参数,以进行副作用清理。

更新 App 组件中的代码,如下所示,以便我们可以在控制台中检查响应数据。

import React, { useState, useEffect } from "react"; const App = () => { const [users, setUsers] = useState([]); const [store, setStore] = useState([]); const getUsers = () => { axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr") .then(response => console.log(response)) }; useEffect(() => { getUsers(); }, []); return ( <div> </div> ); }; export default App;

当您检查控制台时,您将看到一个对象输出。如果你打开这个对象,里面有另一个对象,名为 data,而在 data 里面,有一个名为 results 的数组。

如果我们想从结果中返回特定值,我们可以更新 axios.get 调用,如下所示:

axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr") .then(response => console.log(response.data.results[0].name.first))

这里我们记录了结果数组中第一个值的名称。

5.处理结果数据

现在让我们使用 JavaScript 内置的 map 方法来迭代数组中的每个元素,并创建一个具有新结构的新 JavaScript 对象数组。

使用以下代码更新您的 getUsers 函数:

const getUsers = () => { axios .get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr") .then((response) => { const newData = response.data.results.map((result) => ({ name: `${result.name.first} ${result.name.last}`, id: result.registered })); setUsers(newData); setStore(newData); }) .catch((error) => { console.log(error); }); };

在上面的代码中,我们创建了一个名为 newData 的变量。它存储使用 map 方法查看 response.data.results 数组的结果。在 map 回调中,我们将数组的每个元素引用为 result (注意单数/复数差异)。此外,通过使用数组中每个对象的键值对,我们使用 name 和 id 键值对创建了另一个对象。

一般情况下,在浏览器中查看API调用结果,会看到里面有first 和last 键值对name 对象,但没有全名的键值对。因此,从上面的代码中,我们能够组合 first 和 last 名称,在新的 JavaScript 对象中创建全名。请注意,JSON 和 JavaScript 对象是不同的东西,尽管它们的工作方式基本相同。

然后我们将新的中间数据设置为 setUsers 和 setStore 状态。

6. 通过过滤填充数据存储

过滤的想法非常简单。我们有我们的 store 状态,它始终保持原始数据不变。然后,通过在该状态上使用 filter 函数,我们只获取匹配的元素,然后将它们分配给 users 状态。

const filteredData = store.filter((item) => ( item.name.toLowerCase().includes(event.target.value.toLowerCase()))

filter 方法需要一个函数作为参数,该函数针对数组中的每个元素运行。这里我们将数组中的每个元素称为 item。然后,我们获取每个 item 的 name 键并将其转换为小写,以使我们的过滤功能不区分大小写。

获得 item 的 name 键后,我们检查该键是否包含我们输入的搜索字符串。 includes 是另一个内置 JavaScript 方法。我们将在输入字段中键入的搜索字符串作为参数传递给 includes,如果该字符串包含在调用它的变量中,则它会返回。同样,我们将输入字符串转换为小写,这样无论您输入大写还是小写输入都无关紧要。

最后,filter方法返回匹配的元素。因此,我们只需将这些元素存储在 setUsers 状态中即可。

使用我们创建的函数的最终版本更新 App 组件。

const filterNames = (event) => { const filteredData = store.filter((item) => item.name.toLowerCase().includes(event.target.value.toLowerCase()) ); setUsers(filteredData); }; 7. 创建组件

尽管对于这个小示例,我们可以将所有内容放入 App 组件中,但让我们利用 React 并制作一些小型功能组件。

让我们向应用程序添加几个组件。首先,我们从单独的 JavaScript 文件导入组件(我们将很快定义这些文件):

import Lists from "./components/Lists"; import SearchBar from "./components/SearchBar";

接下来,我们更新应用程序组件的 return 语句以使用这些组件:

return ( <div className="Card"> <div className="header">NAME LIST</div> <SearchBar searchFunction={filterNames} /> <Lists usernames={users} /> </div> );

目前,我们将只关注功能。稍后我将提供我创建的 CSS 文件。

请注意,我们有 searchFunction 属性用于 SearchBar 组件,以及 usernames 属性用于 Lists 组件.

另请注意,我们使用 users 状态而不是 store 状态来显示数据,因为 users 状态包含已过滤的数据结果。

SearchBar 组件

这个组件非常简单。它仅将 filterNames 函数作为 prop,并在输入字段更改时调用该函数。将以下代码放入 components/SearchBar.js 中:

import React from 'react'; const SearchBar = ({ searchFunction}) => { return ( <div> <input className="searchBar" type='search' onChange={searchFunction} /> </div> ) }; export default SearchBar; 列表组件

该组件将简单地列出用户的姓名。这位于 components/List.js 中:

import React from 'react'; const Lists = ({ usernames }) => { return ( <div> <ul> {usernames.map(username => ( <li key={username.id}>{username.name}</li> ))} </ul> </div> ) }; export default Lists;

在这里,我们再次使用 map 方法来获取数组中的每个项目,并从中创建一个

  • 项目。请注意,当您使用 map 创建项目列表时,您需要使用 key 以便 React 跟踪每个列表项目。

    8.跟踪加载状态

    让我们使用 useState 挂钩创建一个加载状态,以显示何时尚未获取数据。

    const [loading, setLoading] = useState(false);

    接下来,我们将更新数据获取方法中的加载状态。

    const getUsers = () => { axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr") .then((response) => { const newData = response.data.results.map((result) => ({ name: `${result.name.first} ${result.name.first}`, id: result.registered, })); setLoading(true); setUsers(newData); setStore(newData); }) .catch((error) => { console.log(error); }); };

    在这里,我们创建了一个 loading 状态并将其初始设置为 false。然后我们在使用 setLoading 状态获取数据时将此状态设置为 true。

    最后,我们将更新 return 语句以呈现加载状态。

    return ( <> {loading ? ( <div className="Card"> <div className="header">NAME LIST</div> <SearchBar searchFunction={filterNames} /> <Lists users={users} /> </div> ) : ( <div className="loader"></div> )} </> );

    使用 JavaScript 三元运算符,我们在加载状态为 false 时有条件地渲染 SearchBar 和 Lists 组件,然后在加载状态为 true 时渲染加载程序。另外,我们创建了一个简单的加载器来在界面中显示加载状态。

    9. 添加一些 CSS 进行样式设置

    您可以在下面找到特定于此示例的 CSS 文件。

    body, html { -webkit-font-smoothing: antialiased; margin: 0; padding: 0; font-family: "Raleway", sans-serif; -webkit-text-size-adjust: 100%; } body { display: flex; justify-content: center; font-size: 1rem/16; margin-top: 50px; } li, ul { list-style: none; margin: 0; padding: 0; } ul { margin-top: 10px; } li { font-size: 0.8rem; margin-bottom: 8px; text-align: center; color: #959595; } li:last-of-type { margin-bottom: 50px; } .Card { font-size: 1.5rem; font-weight: bold; display: flex; flex-direction: column; align-items: center; width: 200px; border-radius: 10px; background-color: white; box-shadow: 0 5px 3px 0 #ebebeb; } .header { position: relative; font-size: 20px; margin: 12px 0; color: #575757; } .header::after { content: ""; position: absolute; left: -50%; bottom: -10px; width: 200%; height: 1px; background-color: #f1f1f1; } .searchBar { text-align: center; margin: 5px 0; border: 1px solid #c4c4c4; height: 20px; color: #575757; border-radius: 3px; } .searchBar:focus { outline-width: 0; } .searchBar::placeholder { color: #dadada; } .loader { border: 15px solid #ccc; border-top: 15px solid #add8e6; border-bottom: 15px solid #add8e6; border-radius: 50%; width: 80px; height: 80px; animation: rotate 2s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 结论

    在本教程中,我们使用随机用户生成器 API 作为随机数据源。然后,我们从 API 端点获取数据,并使用 map 方法在新的 JavaScript 对象中重构结果。

    接下来是使用 filter 和 includes 方法创建过滤函数。最后,我们创建了两个不同的组件,并在尚未获取数据时有条件地以加载状态渲染我们的组件。

    在过去的几年里,React 越来越受欢迎。事实上,我们在 Envato Market 中有许多项目可供购买、审查、实施等。如果您正在寻找有关 React 的其他资源,请随时查看它们。

    以上就是React 和 Axios:API 调用初学者指南的详细内容,更多请关注知识资源分享宝库其它相关文章!

  • 版权声明

    本站内容来源于互联网搬运,
    仅限用于小范围内传播学习,请在下载后24小时内删除,
    如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
    E-mail:dpw1001@163.com

    分享:

    扫一扫在手机阅读、分享本文

    发表评论
    热门文章
    • 闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)

      闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)
      闪耀暖暖钻石竞技场第十七赛季“华梦泡影”即将开启!全新闪耀性感套装【靡城永恒】震撼来袭!想知道如何获得这套精美套装吗?快来看看吧! 【靡城永恒】套装设计理念抢先看: 设计灵感源于夜色中的孤星,象征着淡然、漠视一切的灰色瞳眸。设计师希望通过这套服装,展现出在虚幻与真实交织的夜幕下,一种独特的魅力。 服装细节考究,从面料的光泽、鞋跟声响到裙摆的弧度,都力求完美还原设计初衷。 【靡城永恒】套装设计亮点: 闪耀的绸缎与金丝交织,轻盈的羽毛增添华贵感。 这套服装仿佛是从无尽的黑...
    • BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)

      BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)
      知名变性人制作总监corrine busche离职bioware,引发业界震荡!外媒“smash jt”独家报道称,《龙腾世纪:影幢守护者》制作总监corrine busche已离开bioware,此举不仅引发了关于个人职业发展方向的讨论,更因其可能预示着bioware埃德蒙顿工作室即将关闭而备受关注。本文将深入分析busche离职的原因及其对bioware及游戏行业的影响。 Busche的告别信:挑战与感激并存 据“Smash JT”获得的内部邮件显示,Busche离职原...
    • 奇迹暖暖诸星梦眠怎么样-奇迹暖暖诸星梦眠套装介绍(星梦.暖暖.奇迹.套装.介绍.....)

      奇迹暖暖诸星梦眠怎么样-奇迹暖暖诸星梦眠套装介绍(星梦.暖暖.奇迹.套装.介绍.....)
      奇迹暖暖全新活动“失序之圜”即将开启,参与活动即可获得精美套装——诸星梦眠!想知道这套套装的细节吗?一起来看看吧! 奇迹暖暖诸星梦眠套装详解 “失序之圜”活动主打套装——诸星梦眠,高清海报震撼公开!少女在无垠梦境中,接受星辰的邀请,馥郁芬芳,预示着命运之花即将绽放。 诸星梦眠套装包含:全新妆容“隽永之梦”、星光面饰“熠烁星光”、动态特姿连衣裙“诸星梦眠”、动态特姿发型“金色绮想”、精美特效皇冠“繁星加冕”,以及动态摆件“芳馨酣眠”、“沉云余音”、“流星低语”、“葳蕤诗篇”。...
    • 斗魔骑士哪个角色强势-斗魔骑士角色推荐与实力解析(骑士.角色.强势.解析.实力.....)

      斗魔骑士哪个角色强势-斗魔骑士角色推荐与实力解析(骑士.角色.强势.解析.实力.....)
      斗魔骑士角色选择及战斗策略指南 斗魔骑士游戏中,众多角色各具特色,选择适合自己的角色才能在战斗中占据优势。本文将为您详细解读如何选择强力角色,并提供团队协作及角色培养策略。 如何选择强力角色? 斗魔骑士的角色大致分为近战和远程两种类型。近战角色通常拥有高攻击力和防御力,适合冲锋陷阵;远程角色则擅长后方输出,并依靠灵活走位躲避攻击。 选择角色时,需根据个人游戏风格和喜好决定。喜欢正面硬刚的玩家可以选择战士型角色,其高生命值和防御力能承受更多伤害;偏好策略性玩法的玩家则可以选择法...
    • 龙族卡塞尔之门昂热角色详解-龙族卡塞尔之门昂热全面介绍(之门.龙族.卡塞尔.详解.角色.....)

      龙族卡塞尔之门昂热角色详解-龙族卡塞尔之门昂热全面介绍(之门.龙族.卡塞尔.详解.角色.....)
      龙族卡塞尔之门:昂热角色深度解析 在策略手游《龙族卡塞尔之门》中,卡塞尔学院校长昂热凭借其传奇背景和强大技能,成为玩家们竞相选择的热门角色。作为初代狮心会的最后一人,他拥有超过130岁的阅历,沉稳成熟的外表下,藏着一颗爽朗豁达的心。游戏中,昂热不仅具备出色的单体输出,更擅长通过控制和辅助技能,为团队创造优势。 技能机制详解 昂热的技能组合灵活多变,包含普通攻击、言灵·时零以及随星级提升解锁的被动技能。虽然普通攻击仅针对单体目标,但言灵·时零却能对全体敌人造成物理伤害,并有几率...