Почти любому веб-проекту нужно работать с 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 key={person.id}>{person.name}</li>)}
      </ul>
    )
  }
}

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

POST запросы

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

import * as React from 'react';
import * as axios  from 'axios';

export class PersonList extends React.Component {
   constructor() {
      super(this);
      this.state={id:""};
  }
  handleChange = event => {
    this.setState({ userName: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();
    const requestData = { user:{
      userName: this.state.userName
    }};
    axios.post(`https://jsonplaceholder.typicode.com/users`, request)
      .then(result => {
        console.info(result);
        console.info(result.data);
      })
  }

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

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

DELETE запрос

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

import * as React from 'react';
import * as axios  from 'axios';

export  class PersonList extends React.Component {
  constructor() {
    super(this);
    this.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(result => {
        console.info(result,result.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person ID:
            <input type="text" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete user</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';