Logo

菜单

发布于 2026-01-06 4 阅读
0

什么是 API？如何在 React 中使用 Hooks 获取 API？⚓

什么是 API？如何在 React 中使用 Hooks 获取 API？⚓

无论你是 API 新手，还是想使用你最喜欢的 Hook，这篇教程都适合你。在深入学习 React 和其他相关内容之前，让我先为你介绍一下 API 及其工作原理，以便你更好地理解我们接下来要做的事情。

为此，我假设您已经了解 React 和 Hooks。如果您还不了解，官方文档应该足以让您初步了解它们的功能。简而言之，如果您想使用 React 应用状态而无需编写代码Class，那么 Hooks 是一个绝佳的入门选择。

以下文章或许对您有所帮助：

vaibhavkhulbe

揭秘 20 个鲜为人知的 React 术语和特性（附示例）🔮

Vaibhav Khulbe ・ 2020年4月12日

#javascript #react #webdev #programming

什么是API？它有什么作用？🧐

严格来说，API 代表应用程序编程接口（Application Programming Interface）。但这些字到底是什么意思呢？好吧，听我慢慢道来……

它就像一个共享边界，你的应用程序和来自服务器（或数据库）的数据通过这个边界进行交互和交换信息，以便执行某些操作或运行应用程序。

最常见的操作是向应用程序发送请求（没错，你实际上是在调用该 API 的方法/函数）。需要注意的是，API 不是远程服务器，而是应用程序的一部分。服务器负责接收和发送响应数据包。

互联网上有很多与 API 交互的例子，你可能对此并不了解。我们都使用 Facebook，所以无论何时你发布动态、发表评论或对表情包做出反应，你都在与它的服务器交互，而 API 则充当你（客户端）和 Facebook（服务器）之间的中间人。

以下是Perry Eising在 Medium 上发表的文章中的一张图表，展示了 API 如何发挥作用：

API图

API在应用程序中的作用

您可以阅读全文，其中对此进行了深入探讨：

佩里·艾辛

API 究竟是什么？你听说过“API”这个词吗？ | 作者：Perry Eising | Medium

佩里·艾辛・
中等大小的标志中等的

并非所有 API 都以这种方式运作。有些公司/工具会提供 API 调用权限，以便您获取特定数据并在项目中使用。这些 API 的种类繁多，从类似JSONPlaceholder的虚拟用户生成器到SuperHero API都有。最终，它们的主要目标是为您提供一些数据以供使用。

得到它

谁准备好了？

了解 API 🔄

不过，在本教程中，我们将使用由Madis Väin开发的名为“外汇汇率 API”的货币 API 。这是一项免费服务，数据来源于欧洲中央银行。

以下是我们使用汇率 API 的方式：

获取最新汇率

要获取响应，我们只需发送一个 GET 请求：

GET https://api.exchangeratesapi.io/latest HTTP/1.1
Enter fullscreen mode Exit fullscreen mode

但这样就能得到以欧元（默认基准货币）计价的汇率。

获取以您本国货币计价的汇率

为此，我们只需添加?base参数。因此，如果我们想获取以美元为单位的值，则上述请求将变为：

GET https://api.exchangeratesapi.io/latest?base=USD HTTP/1.1
Enter fullscreen mode Exit fullscreen mode

好了，现在我们知道了它的工作原理，让我们开始一个 React 项目吧！

在我们的 React 应用中使用 Hooks 的 API 🐱‍💻

步骤 1：清空默认代码，并在App.js中添加 API 的基本 URL 作为const.

const BASE_URL = 'https://api.exchangeratesapi.io/latest';
Enter fullscreen mode Exit fullscreen mode

第一步很简单，对吧？接下来这一步就精彩多了。🔥

步骤 2：每次应用加载时获取 API。

我们使用useEffect钩子函数来实现这一点。如前所述，此效果 会在每次渲染完成后运行，因此在这里似乎是一个不错的选择。

1️⃣使用 JavaScript 的原生方法fetch调用货币汇率 API，将响应转换为 JSON，然后在下一个 Promise 中，我们得到返回的结果data。

// This will only run the first time our app loads
useEffect(() => {
    fetch(BASE_URL)
      .then((res) => res.json())
      .then((data) => {
        // Code for the next step here
     }
  }, []);
Enter fullscreen mode Exit fullscreen mode

2️⃣使用 Hook 设置货币选项列表的应用程序状态useState。默认情况下我们没有任何initialState选项，因此我们在useState().

const [currencyOptions, setcurrencyOptions] = useState([]);
Enter fullscreen mode Exit fullscreen mode

接下来，我们setcurrencyOptions在内部编写函数.then()。

setcurrencyOptions([data.base, ...Object.keys(data.rates)]);
Enter fullscreen mode Exit fullscreen mode

我们传递一个数组。第一个值是data我们从 API 获取到的值，第二个值是我们keys从JSONObject返回的数据中获取的值。通过这种方式，我们的货币选项将被设置为该值。

在这一步，您可以console.log(currencyOptions)……第一次运行会输出一个空数组，但第二次运行会输出所有可用的货币选项，从默认值EUR到MYR……。现在我们已经将所有基础货币导入到应用中，接下来让我们添加更多 Hooks。

3️⃣接下来，我们需要设置一个默认货币值。为此，我们再次利用useState()Hook。其中一个货币值将作为基础货币类型，另一个货币值将作为我们需要转换的目标货币类型。

const [fromCurrency, setFromCurrency] = useState();
const [toCurrency, setToCurrency] = useState();
...
const firstCurrency = Object.keys(data.rates)[0];
setcurrencyOptions([data.base, ...Object.keys(data.rates)]);
setFromCurrency(data.base);
setToCurrency(firstCurrency);
Enter fullscreen mode Exit fullscreen mode

它setFromCurrency()简单地获取基础货币，然后setToCurrency()获取数组中的第一个选项Object.keys()。您可以将其添加到您的 UI 代码中，以选择/更改特定的货币类型。现在让我们设置不同的金额。

4️⃣同一个 Hook 将负责设置数量：

const [amount, setAmount] = useState(1);
Enter fullscreen mode Exit fullscreen mode

我们将默认值设为“ amount” 1。我们更进一步，允许用户同时进行双向转换。也就是说，用户可以在“From”字段中添加值，并在“To”字段中获得转换结果，反之亦然。一个字段的更改将直接反映在另一个字段中。为了实现这一点，我们需要一个单独的变量来表示这种值字段的交换。

const [exchangeRate, setExchangeRate] = useState();
const [amountInFromCurrency, setAmountInFromCurrency] = useState(true);
...
setExchangeRate(data.rates[firstCurrency]);
Enter fullscreen mode Exit fullscreen mode

我们添加了布尔值true，以便检查金额更改的是“源”货币还是“目标”货币。至于实际汇率值，我们还有一个useState()默认值为空的函数。
在函数内部.then()，我们将汇率值设置为从对象返回的汇率data，并传递该firstCurrency值。这样我们就得到了所选货币的实际汇率。

5️⃣最后，我们更进一步（现在没有任何 Hooks 了😌），并添加了一个简单的逻辑结构来获取我们进行转换所需的所有值。

let toAmount, fromAmount;
  if (amountInFromCurrency) {
    // The 'amount' in state is 'fromAmount'
    fromAmount = amount;
    toAmount = amount * exchangeRate;
  } else {
    // 'amount' is in 'toCurrency'
    toAmount = amount;
    fromAmount = amount / exchangeRate;
  }
Enter fullscreen mode Exit fullscreen mode

好了，开始吧。如果amountInFromCurrency为真true，则表示amount状态中的值将位于“from”字段中。下一个链接只是简单地将值amount乘以exchangeRate我们从上一步得到的值。

如果amount“from”中没有“the”，那么我们就进行乘法的逆运算，即（🥁假装敲鼓🥁）除法！呵呵。

步骤 3：当我们更改货币类型时，更新转换。

useEffect()只需使用另一个Hook即可轻松修复此错误：

useEffect(() => {
    if (fromCurrency != null && toCurrency != null) {
      fetch(`${BASE_URL}?base=${fromCurrency}&symbols=${toCurrency}`)
        .then((res) => res.json())
        .then((data) => setExchangeRate(data.rates[toCurrency]));
    }
  }, [fromCurrency, toCurrency]);
Enter fullscreen mode Exit fullscreen mode

我们同时传递了这两个参数fromCurrency，toCurrency因为我们需要在这些值中的任何一个发生变化时进行更新。我们正在进行双向数据绑定！

上面的代码中新增了一点，就是我们&symbols向 . 添加了内容BASE_URL。根据 API 文档，我们“通过设置symbols参数来请求特定的汇率”。

GET https://api.exchangeratesapi.io/latest?symbols=USD,GBP HTTP/1.1
Enter fullscreen mode Exit fullscreen mode

因此，我们将base转换设置为fromCurrency接受symbols所有我们希望转换的值。我们通过动态设置来实现这一点toCurrency。

如果一切顺利，没有出现任何崩溃或错误，您可以直接在 React 组件代码中实现此功能。

接下来去哪儿？🤔

您可以继续使用APIList.fun来尝试其他 API，利用 Hooks 将其添加到您的 React 项目中。并非所有 API 都是免费的，请务必根据项目规模选择合适的 API。

糟糕……最好还是联系@docsmsft寻求帮助：https://t.co/RKvIJcMltv

图片来源：https://t.co/2UdZDZhoLu #开发者幽默 #开发者 #编程 #ICYMI pic.twitter.com/2GpDO8zAmv

— Microsoft Developer UK (@msdevUK) 2020年4月25日

📫 订阅我的每周开发者简讯 📫

PS：从今年开始，我决定在 DEV Community 上发表文章。之前我是在 Medium 上写作。如果有人想看看我的文章，这是我的 Medium 个人主页。
文章来源：https://dev.to/vaibhavkhulbe/what-is-an-api-how-to-fetch-it-in-react-with-hooks-2528
你第一次找开发者工作：糟透了，但你...
技能与兴趣的关系