Поиск по сайту:

Как использовать Axios с React

Введение

Многим веб-проектам необходимо взаимодействовать с REST API на каком-то этапе их разработки. Получить API.

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

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

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

Предпосылки

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

  • Как установить Node.js в Ubuntu 18.04.
  • Новый проект React, созданный с помощью учебника «Как настроить проект React с созданием приложения React».
  • Кроме того, полезно иметь базовое понимание JavaScript, которое вы можете найти в серии статей How To Code in JavaScript, наряду с базовыми знаниями HTML и CSS.

Это руководство было проверено с помощью Node.js v16.13.1, npm v8.1.4, react v17.0.2 и axios v0.24.0.

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

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

  1. npx create-react-app react-axios-example

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

  1. cd react-axios-example

Затем выполните эту команду, чтобы установить Axios:

  1. npm install axios@0.24.0

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

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

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

Внутри вашего проекта React вам нужно будет создать новый компонент с именем PersonList.

Сначала создайте новый подкаталог components в каталоге src:

  1. mkdir src/components

В этом каталоге создайте 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 key={person.id}>{person.name}</li>
            )
        }
      </ul>
    )
  }
}

Во-первых, вы импортируете React и Axios, чтобы их можно было использовать в компоненте. Затем вы подключаетесь к хуку жизненного цикла componentDidMount и выполняете запрос GET.

Вы используете axios.get(url) с URL-адресом из конечной точки API, чтобы получить обещание, которое возвращает объект ответа. Внутри объекта ответа есть данные, которым затем присваивается значение person.

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

Добавьте этот компонент в свой app.js:

import PersonList from './components/PersonList.js';

function App() {
  return (
    <div ClassName="App">
      <PersonList/>
    </div>
  )
}

Затем запустите ваше приложение:

  1. npm start

Просмотр приложения в браузере. Вам будет представлен список из 10 имен.

Шаг 3 — Создание POST-запроса

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

Внутри вашего проекта React вам нужно будет создать новый компонент с именем PersonAdd.

Создайте PersonAdd.js и добавьте следующий код, чтобы создать форму, которая позволяет пользователю вводить данные, а затем POST отправляет содержимое в API:

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

export default class PersonAdd 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 в форме.

Добавьте этот компонент в свой app.js:

import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';

function App() {
  return (
    <div ClassName="App">
      <PersonAdd/>
      <PersonList/>
    </div>
  )
}

Затем запустите ваше приложение:

  1. npm start

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

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

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

Внутри вашего проекта React вам нужно будет создать новый компонент с именем PersonRemove.

Создайте PersonRemove.js и добавьте следующий код для удаления пользователя:

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

export default class PersonRemove 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="number" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

Опять же, объект res предоставляет вам информацию о запросе. Затем вы можете снова использовать console.log эту информацию после отправки формы.

Добавьте этот компонент в свой app.js:

import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';
import PersonRemove from './components/PersonRemove';

function App() {
  return (
    <div ClassName="App">
      <PersonAdd/>
      <PersonList/>
      <PersonRemove/>
    </div>
  )
}

Затем запустите ваше приложение:

  1. npm start

Просмотр приложения в браузере. Вам будет представлена форма для удаления пользователей.

Шаг 5 — Использование базового экземпляра в Axios

В этом примере вы увидите, как настроить базовый экземпляр, в котором можно определить URL-адрес и любые другие элементы конфигурации.

Создайте отдельный файл с именем api.js:

  1. nano src/api.js

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

import axios from 'axios';

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

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

import React from 'react';

import API from '../api';

export default class PersonRemove 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 для работы с промисами.

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

import React from 'react';

import API from '../api';

export default class PersonRemove extends React.Component {
  // ...

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

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

  // ...
}

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

Заключение

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

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