如何在 React 中使用 Axios

笔记首页 >> 教程系列 >> 如何在 React 中使用 Axios

介绍

Web 上的许多项目在其开发的某个阶段需要与 REST API 交互。Axios是一个基于$httpAngular.js v1.x 中的服务的轻量级 HTTP 客户端，类似于原生的 JavaScript Fetch API。

爱可信是基于承诺-，它给你的能力，JavaScript的的占据优势async，并await为更可读的异步代码。

您还可以拦截和取消请求，并且内置了防止跨站点请求伪造的客户端保护。

在本文中，您将看到如何使用 Axios 访问React 应用程序中流行的JSON Placeholder API 的示例。

先决条件

要阅读本文，您需要以下内容：

您的计算机上安装了Node.js版本 10.16.0。要在 macOS 或 Ubuntu 18.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。
一个新的阵营项目设置与创建应用程序做出反应按照该如何建立一个阵营项目与创建应用程序做出反应教程。
它还有助于对 JavaScript 有基本的了解，您可以在“如何在 JavaScript 中编码”系列中找到这些知识，以及 HTML 和 CSS 的基本知识。

第 1 步 – 将 Axios 添加到项目中

在本节中，您将digital-ocean-tutorial按照如何使用创建 React 应用程序设置 React 项目教程将 Axios 添加到您创建的 React 项目中。

要将 Axios 添加到项目中，请打开您的终端并将目录更改为您的项目：

cd digital-ocean-tutorial

然后运行这个命令来安装 Axios：

npm install axios

接下来，您需要将 Axios 导入到要使用它的文件中。

第 2 步 – 提出`GET`请求

在此示例中，您创建一个新组件并将 Axios 导入其中以发送GET请求。

在srcReact 项目的文件夹中，创建一个名为的新组件PersonList.js：

nano src/PersonList.js

将以下代码添加到组件中：

数字海洋教程/src/PersonList.js

import React from 'react';

import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }

  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

首先，您导入 React 和 Axios，以便它们都可以在组件中使用。然后钩入componentDidMount生命周期钩子并执行GET请求。

您使用axios.get(url)来自 API 端点的 URL 来获取返回响应对象的承诺。在响应对象内部，有数据被赋值为person。

您还可以获取有关该请求的其他信息，例如下的状态代码res.status或其中的更多信息res.request。

第 3 步 – 提出`POST`请求

在这一步中，您将使用 Axios 和另一个名为的 HTTP 请求方法POST。

删除之前的代码PersonList并添加以下内容以创建一个允许用户输入的表单，然后POST将内容发送到 API：

数字海洋教程/src/PersonList.js


import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const user = {
      name: this.state.name
    };

    axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

在handleSubmit函数内部，您可以阻止表单的默认操作。然后更新state到user输入。

UsingPOST为您提供相同的响应对象，其中包含您可以在then调用内部使用的信息。

要完成POST请求，您首先要捕获user输入。然后您将输入与POST请求一起添加，这将为您提供响应。然后您可以console.log响应，它应该user在表单中显示输入。

第 4 步 – 提出`DELETE`请求

在此示例中，您将看到如何使用axios.deleteURL 作为参数并将其从 API 中删除项目。

更改POST示例中表单的代码以删除用户而不是添加新用户：

数字海洋教程/src/PersonList.js


import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState({ id: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person ID:
            <input type="text" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

同样，该res对象为您提供有关请求的信息。console.log提交表单后，您可以再次使用该信息。

第 5 步 – 在 Axios 中使用基础实例

在此示例中，您将看到如何设置基本实例，您可以在其中定义 URL 和任何其他配置元素。

创建一个名为的单独文件api.js：

nano src/api.js

axios使用这些默认值导出一个新实例：

数字海洋教程/src/api.js

import axios from 'axios';

export default axios.create({
  baseURL: `http://jsonplaceholder.typicode.com/`
});

一旦设置了默认实例，就可以在PersonList组件内部使用它。您像这样导入新实例：

数字海洋教程/src/PersonList.js

import React from 'react';
import axios from 'axios';

import API from '../api';

export default class PersonList extends React.Component {
  handleSubmit = event => {
    event.preventDefault();

    API.delete(`users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }
}

因为http://jsonplaceholder.typicode.com/现在是基本 URL，所以每次想要访问 API 上的不同端点时，您不再需要输入整个 URL。

步骤 6 — 使用`async`和`await`

在此示例中，您将看到如何使用async和await使用 Promise。

该await关键字解析promise和回报value。所述value然后可以被分配给一个变量。

handleSubmit = async event => {
  event.preventDefault();

  // 
  const response = await API.delete(`users/${this.state.id}`);

  console.log(response);
  console.log(response.data);
};

在此代码示例中，.then()被替换。该promise解决了，并且该值存储在内部response变量。

结论

在本教程中，您探索了几个关于如何在 React 应用程序中使用 Axios 创建 HTTP 请求和处理响应的示例。

如果您想了解有关 React 的更多信息，请查看如何在 React.js系列中编码，或查看React 主题页面以获取更多练习和编程项目。

觉得文章有用？

点个广告表达一下你的爱意吧！