Почти любому веб-проекту нужно работать с 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 * as React from 'react';
import * as axios  from 'axios';

export class PersonList extends React.Component {
state = {
people: []
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res {
const people = res.data;
this.setState({ people });
})
}
render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

В коде выше используется метод 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 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>
    )
  }
}

DELETE запрос

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

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>
    )
  }
}

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

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

axios.defaults.baseURL = 'https://api.domain.com';
axios.defaults.headers.common['Authorization'] = 'JWT_TOKEN_HERE';
axios.defaults.headers.post['Content-Type'] = 'application/json';

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

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

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