Почти любому веб-проекту нужно работать с REST API. Axios это легковесный HTTP клиент который базируется на $http сервисе Angular.js и очень похож на Fetch API.
Axios базируется на Promise и поэтому можно воспользоваться преимуществами async и await для написания читаемого асинхронного кода. Также библиотека позволяет перехватывать и и отменять запросы, кроме этого она имеет встроенную защиту от межсайтовых подделок запросов. Но главным преимуществом библиотеки является удобное для использования API!

Использовать Axios внутри React.js приложения очень просто. В этой статье приводится пример работы с сторонним REST API в React веб-приложении. Начнем с того что добавим Axios в проект:

# установка с помощью yarn
$ yarn add axios
# установка с помощью npm
$ npm install axios --save

GET запросы

Для начала создадим компонент PersonList и в методе жизненного цикла componentDidMount сделаем GET с помощью axios.

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

export default class PersonList extends React.Component {
  state = {
    people: []
  }
  componentDidMount() {
    axios.get(`${axios.defaults.baseURL}/people`)
      .then(res => {
        const people= res.data;
        this.setState({ people});
      })
  }

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

В коде выше используется метод axios.get(url) который возвращает promise, который в результате в вернёт объект response. Необходимые нам данные хранятся в поле data.
Если необходимо можно получить некоторые метаданные о запросе, например статус код (res.status) или более детально в объекте res.request.

POST запросы

Кроме GET запросов библиотека axios умеет работать и с другими HTTP методами, такими как POST или PUT. Давайте создадим форму которая позволяет отправить введенные пользователем данные на сервер.

При POST запросе объект респонса такое же как в GET запросе.

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

export default class PeopleList 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(`${axios.defaults.baseURL}/people`, { user })
      .then(res => {
        console.log(res);
      })
  }

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

DELETE запрос

Мы можем удалять сущности через API используя метод axios.delete, передавая туда URL как параметр. Давайте поменяем нашу форму, так чтобы она удаляла а не добавляла юзера.

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

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

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

  handleSubmit = event => {
    event.preventDefault();
    axios.delete(`${axios.defaults.baseURL}/${this.state.id}`)
      .then(res => {
        console.log(res);
      })
  }

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

Глобальная конфигурация

axios позволяет задать параметры которые будут подставляется в все запросы автоматически. Например можно задать базовой URL API или токен авторизации

axios.defaults.baseURL = config.baseURL;
axios.defaults.headers.common['Authorization'] = 'JWT_TOKEN_HERE';
axios.defaults.headers.post['Content-Type'] = 'application/json';

Также можно создать несколько инстансов конфигурации

// Передаем параметры по умолчанию при создании инстанса
const instance = axios.create({
baseURL: config.BASE_URL
});

// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = 'JWT_TOKEN_HERE';