如何通过 API 获取使用 React 应用程序创建随机笑话？

React 应用程序通常需要使用外部 API 来获取数据。本文将介绍如何使用 API 获取随机笑话数据以在 React 应用程序中使用。

选择 API

在开始编写代码前，我们需要选择一个适合我们用途的 API。这里我们推荐一个叫做 icanhazdadjoke 的 API，它是一个提供大量父亲笑话（Dad Jokes）的 API，并且完全免费。

发送 API 请求

要从 API 中获取数据，我们需要向 API 发送请求。在 React 应用程序中，我们可以使用 fetch 函数来发送请求。

以下是如何使用 fetch 函数向 icanhazdadjoke API 发送 GET 请求：

fetch('https://icanhazdadjoke.com/', {
  headers: {
    Accept: 'application/json',
  },
})
  .then((response) => response.json())
  .then((data) => console.log(data));

在上面的代码中，我们向 https://icanhazdadjoke.com/ 发送了一个 GET 请求，并且指定了请求头为接受 JSON 数据。当请求返回时，我们将响应体解析为 JSON 并输出到控制台。

在 React 应用程序中使用

现在我们已经知道如何使用 API 获取数据，那么我们如何将它应用到我们的 React 应用程序中呢？我们可以在组件的生命周期方法 componentDidMount 中发送请求，并将数据存储在组件的状态中。

以下是一个示例组件，它在加载时获取随机笑话数据并展示在页面上：

import React, { Component } from 'react';

class RandomJoke extends Component {
  constructor(props) {
    super(props);

    this.state = {
      joke: '',
    };
  }

  componentDidMount() {
    fetch('https://icanhazdadjoke.com/', {
      headers: {
        Accept: 'application/json',
      },
    })
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          joke: data.joke,
        });
      });
  }

  render() {
    return <p>{this.state.joke}</p>;
  }
}

export default RandomJoke;

在上面的代码中，我们定义了一个名为 RandomJoke 的组件，并在组件的构造函数中初始化了状态。在 componentDidMount 中，我们发送了 GET 请求并将响应体解析为 JSON，然后将笑话存储在组件的状态中。最后，在 render 方法中，我们将笑话展示在页面上。

总结

在本文中，我们学习了如何使用 API 获取随机笑话数据，并将其应用到 React 应用程序中。我们使用了 fetch 函数向 API 发送请求，并使用组件的状态存储了笑话数据。希望本文对你有所帮助！