// Tutorial //

Использование Axios с React

Published on November 12, 2020
Default avatar
By PaulHalliday
Developer and author at DigitalOcean.
Использование Axios с React

Введение

Многим веб-проектам на некотором этапе их развития требуется взаимодействие с REST API. Axios — это облегченный клиент HTTP на базе сервиса $http с Angular.js v1.x, похожего на собственный JavaScript Fetch API.

Axios основан на промисах, что дает вам возможность использовать возможности JavaScript async и await для получения более удобочитаемого асинхронного кода.

Вы можете перехватывать и отменять запросы, также в клиенте имеется встроенная защита от подделки запросов между сайтами.

В этой статье вы увидите примеры использования Axios для доступа к популярному JSON Placeholder API из приложения React.

Предварительные требования

Чтобы следовать за примерами этой статьи, вам потребуется следующее:

Шаг 1 — Добавление Axios в проект

В этом разделе мы добавим Axios в проект React digital-ocean-tutorial, созданный вами при выполнении учебного модуля Настройка проекта React Project с помощью приложения Create React App.

Чтобы добавить Axios в проект, откройте терминал и поменяйте каталоги в вашем проекте:

  1. cd digital-ocean-tutorial

Затем запустите эту команду для установки Axios:

  1. npm install axios

Далее вам потребуется импортировать Axios в файл, где вы захотите его использовать.

Шаг 2 — Создание запроса GET

В этом примере мы создадим новый компонент и импортируем в него Axios для отправки запроса GET.

Создайте в папке src вашего проекта React новый компонент с именем PersonList.js:

  1. nano src/PersonList.js

Добавьте в компонент следующий код:

digital-ocean-tutorial/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) с URL от конечной точки API, чтобы получить промис, возвращающий объект ответа. Внутри объекта ответа имеются данные, которым присвоено значение person.

Также вы можете получить и другую информацию о запросе, в том числе код состояния res.status, или дополнительную информацию внутри res.request.

Шаг 3 — Составление запроса POST

На этом шаге мы используем Axios с еще одним методом запросов HTTP, а именно POST.

Удалите предыдущий код в PersonList и добавьте следующий код, чтобы создать форму для ввода данных пользователя и последующей отправки контента в API методом POST:

digital-ocean-tutorial/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.

Использование POST дает тот же объект ответа с информацией, которую вы сможете использовать внутри вызова then.

Чтобы выполнить запрос POST, мы вначале захватываем ввод user. Затем мы добавляем ввод вместе с запросом POST и получаем ответ. Вы можете отправить ответ в console.log, где ввод user будет показан в форме.

Шаг 4 — Создание запроса DELETE

В этом примере вы видите, как удалять элементы из API, используя axios.delete и передавая URL как параметр.

Измените код формы из примера POST, чтобы удалить пользователя вместо добавления нового:

digital-ocean-tutorial/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:

  1. nano src/api.js

Экспортируйте новый экземпляр axios со следующими значениями по умолчанию:

digital-ocean-tutorial/src/api.js
import axios from 'axios';

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

После настройки экземпляра по умолчанию его можно использовать внутри компонента PersonList. Новый экземпляр импортируется следующим образом:

digital-ocean-tutorial/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, вам больше не потребуется вводить URL полностью каждый раз, когда вы захотите использовать другую конечную точку API.

Шаг 6 — Использование async и await

В этом примере вы видите, как использовать async и await для работы с промисами.

Ключевое слово await разрешает промис и возвращает значение. Затем значение может быть присвоено переменной.

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

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

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

В этом примере кода выполняется замена .then(). Промис разрешается, и его значение сохраняется в переменной response.

Заключение

В этом учебном модуле мы изучили несколько примеров использования Axios в приложении React для создания запросов HTTP и ответов обработки.

Если вы хотите узнать больше о React, ознакомьтесь с серией Программирование на React.js или посмотрите страницу темы React, где вы найдете дополнительные упражнения и проекты для программирования.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment