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

Введение

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

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

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

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

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

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

• Node.js версии 10.16.0, установленный на вашем компьютере. Чтобы установить его в macOS или Ubuntu 18.04, следуйте указаниям руководства Установка Node.js и создание локальной среды разработки в macOS или раздела Установка с помощью PPA руководства Установка Node.js в Ubuntu 18.04.
• Новый проект React, настроенный с помощью приложения Create React App в соответствии с указаниями учебного модуля Настройка проекта React с помощью приложения Create React App.
• Также вам нужно понимать основы языка JavaScript, для изучения которого вам подойдет серия Программирование на JavaScript, а также обладать базовыми знаниями языков HTML и CSS.

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

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

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

cd digital-ocean-tutorial

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

npm install axios

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

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

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

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

nano 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:

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, чтобы удалить пользователя вместо добавления нового:

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 со следующими значениями по умолчанию:

import axios from 'axios';

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

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

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, где вы найдете дополнительные упражнения и проекты для программирования.