Tutorial

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

Published on November 12, 2020
Русский
Использование 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, где вы найдете дополнительные упражнения и проекты для программирования.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel