在反应中从 API 获取数据 - JavaScript

在许多现代应用程序中，从 API 中获取数据是非常重要的。React 是其中一种使用 JavaScript 进行构建的流行前端框架。本文将向您展示如何在 React 中获取 API 数据。

Step 1 - 安装axios

我们将使用 axios 库来发出 HTTP 请求。可以使用以下命令将 axios 安装到我们的项目中：

npm install axios --save

Step 2 - 创建 React 组件

现在，我们需要在项目中创建一个 React 组件。我们可以使用以下命令来创建一个名为 MyComponent 的组件：

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      // JSX code here
    );
  }
}

export default MyComponent;

Step 3 - 发送 HTTP 请求

在 componentDidMount 方法中，我们将使用 axios 发出 GET 请求。

import React, { Component } from 'react';
import axios from 'axios';

class MyComponent extends Component {
  componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => console.log(response))
      .catch(error => console.log(error));
  }

  render() {
    return (
      // JSX code here
    );
  }
}

export default MyComponent;

在上面的代码中，我们创建一个 componentDidMount 方法，并通过各种 HTTP 方法使用 axios 库。我们的请求地址是 https://jsonplaceholder.typicode.com/users，返回一个带有一些虚拟信息的 JSON 对象。

Step 4 - 处理 API 数据

现在，我们已经成功地从我们的 API 中获取了数据，我们可以在我们的组件中使用这些数据。例如，如果我们想要将这些数据呈现在列表中，可以使用以下代码：

import React, { Component } from 'react';
import axios from 'axios';

class MyComponent extends Component {
  state = {
    users: []
  }

  componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => this.setState({ users: response.data }))
      .catch(error => console.log(error));
  }

  render() {
    const { users } = this.state;

    return (
      <div>
        <ul>
          {users.map(user => <li key={user.id}>{user.name}</li>)}
        </ul>
      </div>
    );
  }
}

export default MyComponent;

在上面的代码中，我们在组件的 state 中设置了一个属性，即 users，我们将 API 数据存储在这个属性中。我们使用 map 函数来迭代我们的数据，并将这些数据呈现在列表中。

结论

在本文中，我们了解了如何使用 axios 发送 HTTP 请求，以及如何处理从 API 返回的数据。如果您想学习更多 React 的知识，可以访问 React 官方文档。