Axios руководство на русском

Введение

HTTP-клиент для браузера и node.js на основе Promise

Axios — это HTTP-клиент, основанный на Promise для node.js и браузера. Он изоморфный (= он может работать в браузере и node.js с той же базой кодов). На стороне сервера он использует нативный node.js http-модуль, тогда как на стороне клиента (браузер) он использует XMLHttpRequests.

Особенности

• Делает XMLHttpRequests запросы из браузера
• Делает http запросы из node.js
• Поддерживает Promise API
• Перехватывает запросы и ответы
• Преобразовывает данные запроса и ответа
• Отменяет запросы
• Автоматическое преобразование для JSON-данных
• Поддержка на стороне клиента для защиты от XSRF

Установка

Используя npm:

$ npm install axios

Используя bower:

$ bower install axios

Используя yarn:

$ yarn add axios

Используя jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Используя unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios

Клиент для HTTP-запросов для браузера и Node.JS, построенный на Promise

Отличительные особенности

• Отправка XMLHttpRequests из браузера
• HTTP запросы из NodeJS
• Полная поддержка Promise API
• Перехват запросов и ответов
• Преобразование получаемых и принимаемых данных
• Отмена запроса
• Автоматическое преобразование JSON
• Защита на стороне клиента от CSRF-атак

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	8+ ✔

Установка

посредством npm (у вас должен быть установлен пакет Node JS ссылка )

c помощью менеджера пакетов bower

используя ссылку на CDN, которую можно разместить непосредственно на странице

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Примеры использования

GET — запрос

// делаем GET запрос чтобы получить пользователя (user) 
// с указанным параметром ID = 12345
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// так же, параметры можно передавать отдельно, в виде объекта
// схема ('url', params), где params объект
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// Хотите использовать async/await? Не проблема! Добавьте "async" - перед вашим методом/функуцей,
// и await перед самими запросом.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

FOX: async/await — часть нового стандарта ECMAScript 2017. Этот функционал не поддерживается IE и некоторыми старыми браузерами.
Почитать на русском можно здесь
Также можно использовать BABEL для транспиляции(перевода) кода к стандарту ES5, который имеет практически полную совместимость с браузерами

POST — запрос

FOX обратите внимание, что зачастую в POST запросе требуется что-то отправлять: объект с параметрами, пустой объект или что-либо еще.

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

FOX в стандарте ES6 вышеуказанный код выглядел бы так(применим стрелочную функцию).

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(response => console.log(response));
.catch(error => console.log(error));

FOX Согласитесь, так выглядит лаконичнее. Более детально о новых фишках в ES6 можно прочесть тут — https://learn.javascript.ru/es-modern

Несколько запросов одновременно

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Оба запроса завершены
}));

Axios API

FOX Запросы могут быть выполнены путем передачи параметров/настроек в axios(config). То есть вместо стандартноq схемы axios.get('http://yourlink.com/api', parameters) вы указываете каждый параметр(ссылка, объект для передачи, метод и т.д.) вручную. Иногда это может быть удобно, но если Вам нужно просто отправить небольшой запрос и получить данные, воспользуйтесь стандартной схемой(см. раздел GET-запрос)

// отправка POST запроса
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// отправка GET запроса для получения изображения
// со стороннего сервера
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

axios(url[, config])

// отправка GET запроса с параметрами по умолчанию
axios('/user/12345');

Встроенные методы HTTP запросов

Для Вашего удобства были созданы методы для всех поддерживаемых типов запросов.

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

FOX используя данные методы, Вам необязательно указывать свойства method и data в настройках.

Мультизапросы

Вспомогательные функции для того чтобы использовать несколько запросов одновременно

axios.all(iterable)

axios.spread(callback)

Cоздание нового экземпляра Axios

Вы можете создать новый экземпляр(образец) Axios cо своими настройками

axios.create([config])

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

Методы экземпляра

Доступные методы экземпляра(образца) Axios перечислены ниже. Указанные настройки в них будут объединены с конфигурацией экземпляра.

axios#request(config)

axios#get(url[, config])

axios#delete(url[, config])

axios#head(url[, config])

axios#options(url[, config])

axios#post(url[, data[, config]])

axios#put(url[, data[, config]])

axios#patch(url[, data[, config]])

Настройка запросов

Это параметры для запросов. Если тип запроса не указан, то по умолчанию будет выполняться GET запрос. Запросы указываются при вызове метода, в объекте.
пример: axios.get(params), где params настройки

{
  // `url` - адрес сервера. куда отправляется запрос
  url: '/user',

  // `method` тип http-запроса (get, post, delete и т.д.)
  method: 'get', // default

  // `baseURL` будет добавлен к `url`, если `url` не будет абсолютным.
  // это может быть удобным - установить `baseURL` для экземпляра axios для передачи 
  // относительных URL-адресов.
  // установив единожды в настйроках 'baseURL' не нужно будет указывать полный адрес при запросе.
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` позволяет изменять данные запроса до его отправки на сервер
  // Это применимо только для методов запроса «PUT», «POST» и «PATCH»
  // Последняя функция в массиве должна возвращать строку или экземпляр типа Buffer, ArrayBuffer,
  // FormData или Stream
  // Также вы можете изменить объект заголовков.
  transformRequest: [function (data, headers) {
    // тут пишем код для обработки данных...

    return data;
  }],

  // `transformResponse` позволяет изменять данные ответа, (аналог вышеуказанному методу)
  // но уже для запроса. редультат передается в then / catch
  transformResponse: [function (data) {
    // тут пишем код для обработки данных...

    return data;
  }],

  // `headers` - указываем тут заголовки для запроса
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` - параметры URL, которые обычно указываются в адресе запроса
  // параметры должны быть указаны в виде обычного объекта JS
  params: {
    ID: 12345
  },

  // `paramsSerializer` - метод для сериализации(обработки) параметров
  // (https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` - данные, которые должны быть отправлены в теле запроса
  // Применяется только доя методов 'PUT', 'POST', and 'PATCH'
  // Если параметр `transformRequest` не установлен, то тело запроса может быть следующих типов:
  // - string, object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Для браузера: FormData, File, Blob
  // - Для Node JS: Stream, Buffer
  data: {
    firstName: 'Fred'
  },

  // `timeout` количество миллисекунд до истечения времени ожидания запроса.
  // Если запрос занимает больше времени, чем `timeout`, он будет прерван.
  timeout: 1000,

  // `withCredentials` - отображает статус CORS запросов - то есть должны ли запрошиваться 
  // необходимые парметры или нет. Подробнее тут - https://developer.mozilla.org/ru/docs/Web/HTTP/CORS
  withCredentials: false, // default

  // `adapter` - позволяет делать доп.настройку запросов, что облегчает тестирование.
  // Возвращает Promise и валидный ответ (подробнее в lib/adapters/README.md).
  adapter: function (config) {
    /* ... */
  },

  // `auth` указывает, необходимо ли использовать HTTP Basic auth и предоставлять учетные данные.
  // ВНИМАНИЕ! Этот параметр установит в запрос заголовок `Authorization`, перезаписав все существующие
  // пользовательские заголовки `Authorization`, которые вы задали в настройках 
  // с помощью параметра - 'headers`
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` указывает тип данных, которыми ответит сервер
  // варианты: «arraybuffer», «blob», «document», «json», «text», «stream»,
  responseType: 'json', // по умолчанию

  // `responseEncoding` указывает какую кодировку использовать для обработки ответов
  // Примечание: Игнорируется для опции `responseType` - 'stream'(поток) или запросов на стороне клиента,
  // что вполне логично, так как потоковые данные и должны так передаваться
  responseEncoding: 'utf8', // default

  //`xsrfCookieName` - имя cookie для использования в качестве значения для токена xsrf
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` http-заголовко для использования в качестве значения для токена xsrf
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

  // `onUploadProgress` позволяет обрабатывать события прогресса для загрузки данных
  // например тут можно "повесить" индикатор загружки данных на сервер
  onUploadProgress: function (progressEvent) {
    // делаем тут что угодно...
  },

  // `onDownloadProgress` позволяет обрабатывать события прогресса скачивания данных
  // как вариант - разместить здесь индикацию размера скачиваемого файла
  onDownloadProgress: function (progressEvent) {
    // делаем тут что угодно...
  },

  // `maxContentLength` определяет максимальный размер содержимого ответа HTTP в байтах
  maxContentLength: 2000,

  // `validateStatus` определяет, разрешать или отклонять Prоmise для данного
  // HTTP-ответа. Если `validateStatus` возвращает` true` (или установлен в `null`
  // или `undefined`), Promise будет выполнен; в противном случае отклонен
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },

  // `maxRedirects` - максимальное количество редиректов в node.js.
  // если значение устанвлено в "0" - редиректа не будет
  maxRedirects: 5, // default

  // `socketPath` определяет UNIX Socket для использования в node.js.
  // например. '/var/run/docker.sock' для отправки запросов демону docker.
  // Можно указать только «socketPath» или «proxy».
  // Если оба указаны, используется `socketPath`.
  socketPath: null, // default

  // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
  // and https requests, respectively, in node.js. This allows options to be added like
  // `keepAlive` that are not enabled by default.

  // `httpAgent` и` httpsAgent` - установка своего `httpAgent`, который будет использоваться 
  // при выполнении http и https-запросов. Соответственно, в node.js. 
  // Это позволяет добавлять опции (например `keepAlive`), которые по умолчанию не включены.
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy' определяет имя хоста и порт прокси-сервера
  // Используйте `false` для отключения прокси при запросах, игнорируя глобальные среды.
  // `auth` указывает, что для подключения к прокси следует использовать HTTP Basic auth и
  // предоставляет учетные данные.
  // Эта опция установит заголовок `Proxy-Authorization`, переписывая любые существующие
  // `Proxy-Authorization` заголовки, которые вы задали в` headers`.
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // `cancelToken` указывает токен, который может использоваться для отмены запроса
  cancelToken: new CancelToken(function (cancel) {
  })
}

Схема ответа

Ответ на запрос содержит следующие параметры:

{
  // `data`  - собственно данные ответа от сервера тут
  data: {},

  // `status` HTTP код ответа от сервера
  // полный список тут - https://developer.mozilla.org/ru/docs/Web/HTTP/Status
  status: 200,

  // `statusText` - текст сообщение ответа от сервера
  statusText: 'OK',

  // `headers` - заголовки ответа от сервера.
  headers: {},

  // `config` - это конфигурация `axios` для запроса
  config: {},

  // `request` - это запрос, который сгенерировал этот ответ
  // Это последний экземпляр ClientRequest в node.js (в переадресации)
  // и экземпляр XMLHttpRequest в браузере
  request: {}
}

Используя then можно посмотреть ответ таким образом:

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

При использовании catch или передачи rejection callback(callback для отмены) в качестве 2-го параметра then, ответ будет доступен через объект error, как описано в разделе Обработка ошибок

Настройки по умолчанию

Вы можете указать настройки по умолчанию, которые будут применяться к каждому запросу.

Глобальные переменные в Axios

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Пользовательские настройки для экземплара

// Установка дефолтных настроек при создании экземпляра
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Устанавливаем значения по умолчанию после создания экземпляра
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

Настройка приоритета

Конфигурация будет объединена с порядком приоритета. Порядок — это значения по умолчанию в библиотеке, найденные в lib/defaults.js, затем свойство defaults экземпляра и наконец, аргумент config для запроса. Последний будет иметь приоритет над первым. Вот пример

// Создаем образец используя настройки по умолчанию предоставленные библиотекой
// На этом этапе значение конфигурации тайм-аута равно `0`, как по умолчанию для библиотеки

const instance = axios.create();

// Завершение таймаута по умолчанию для библиотеки
// Теперь все запросы с использованием этого экземпляра будут ждать 2,5 секунды до истечения времени ожидания
instance.defaults.timeout = 2500;

// Завершение таймаута для этого запроса, поскольку, он занимает много времени
instance.get('/longRequest', {
  timeout: 5000
});

Перехватчики

Вы можете перехватить запросы или ответы непосредственно перед тем, как они будут обработаны then или catch.

// Добавление перехвата запроса
axios.interceptors.request.use(function (config) {
    // делаем что угодно перед запросом
    return config;
  }, function (error) {
    // обрабатываем ошибку
    return Promise.reject(error);
  });

// Добавляем перехватчик ответа
axios.interceptors.response.use(function (response) {
    // Делаем что угодно с поступившими данными
    return response;
  }, function (error) {
    // Обрабатываем ошибку
    return Promise.reject(error);
  });

Если позднее Вам нужно будет удалить перехватчик, Вы можете сделать следующее:

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

Также, Вы можете добавлять перехватчики в свой экземпляр axios

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

Обработка ошибок

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // Запрос выполнен, и сервер отправил Вам статус код
      // код выпададет из диапазона 2хх (ошибка)
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // Запрос был сделан, но ответ не получен
      // `error.request` - экземпляр XMLHttpRequest в браузере,
      // http.ClientRequest экземпляр в node.js
      console.log(error.request);
    } else {
      // Что-то пошло не так, вернулась ошибка
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

Вы можете определить свой диапазон ошибок кода состояния HTTP, используя опцию конфигурации validateStatus.
Например, можно настроить так, что все ошибки с кодом в диапазоне 2хх-3хх будут игонирироваться. В реальности это конечно не пригодится, но возможность такая есть

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // остановить запрос, только если код больше или равен 500
  }
})

Отмена запроса

Вы можете отменить запрос, используя cancel token.

Token для отмены запросов в Axios базируется на cancelable promises proposal.

Вы можете создать token отмены с помощью фабричной функции CancelToken.source, как показано ниже:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // обработка ошибок
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// отмена запроса (отображение сообщения можно настроить дополнительно)
source.cancel('Operation canceled by the user.');

Вы также можете создать token для отмены запроса, передав функцию конструктору CancelToken:

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // исполняемая функция получает функцию отмены в качестве параметра
    cancel = c;
  })
});

// отмена запроса
cancel();

Примечание. Вы можете отменить несколько запросов одним токеном(cancell token).

Использование формата application/x-www-form-urlencoded

По умолчанию axios переводит объекты JavaScript в JSON. Чтобы отправить данные в формате application/x-www-form-urlencoded, Вы можете использовать один из следующих вариантов.

Браузер

В браузере Вы можете испольприменить API URLSearchParams следующим образом:

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

Обратите внимание, что URLSearchParams поддерживается не всеми браузерами (см. Caniuse.com), но существует полифилл

Кроме того, вы можете декодировать данные, используя библиотеку qs:

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

Или по-другому… (ES6),

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

Node JS

В Node JS Вы можете использовать модуль querystring так:

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

Вы также можете использовать библиотеку qs.

О версиях…

До тех пор, пока Axios не достигнет версии «1.0», серьезные изменения автором данной библиотеки будут выпущены лишь с новой минорной версией. Например, 0.5.1 и 0.5.4 будут иметь один и тот же API, но версия 0.6.0 будет иметь в своем составе уже серьезные доработки.

Promises / Промисы

Работа axios напрямую зависит от поддержки Promise. Проверить подержку клиентами(браузерами) можно на сайте can i use.
Если Promise не поддерживаются, можно использовать полифилл/polyfill.
Более подробно почитать о Promise на русском можно тут:

• Learn JS
• Руководство
• Промисы на примерах из жизни
• Promise для новичков

TypeScript

Axios и TypeScript работают вместе

import axios from 'axios';
axios.get('/user?ID=12345');

Дополнительная информация

• Изменения
• Руководство по обновлению
• Экосистема
• Руководство для участников
• Кодекс поведения

Респект…

Создатели Axios были вдохновлены $http-service, который есть в Ангуляре / AngularJS. В конечном счете, axios — это попытка дать возможность использовать эту замечатульную фичу Ангуляра за его пределами

Лицензия

MIT

Время на прочтение
4 мин

Количество просмотров 56K

В этой статье вы узнаете как использовать библиотеку Axios в React.

Рассмотрим все на примере запросов на сервер, отобразим полученные данные в таблице, сдалаем компонент проверки загрузки и все это используя React Hooks.

Что такое Axios?

Axios это один из самых популярных HTTP клиентов для браузеров и node.js, основанный на промисах.

В Axios есть поддержка запросов, получение ответов от сервера, их трансформация и автоматическая конвертация в JSON.

Перед тем как начать, создадим новый React проект:

npx create-react-app react-axios-table

Зайдем в него:

cd react-axios-table

Данные для проекта

В качестве данных для нашего проекта будем использовать массив объектов:

[
	{
		id: 101,
		firstName: 'Sue',
		lastName: 'Corson',
		email: 'DWhalley@in.gov',
		phone: '(612)211-6296',
		address: {
			streetAddress: '9792 Mattis Ct',
			city: 'Waukesha',
			state: 'WI',
			zip: '22178'
		},
		description: 'et lacus magna dolor...',
	}
]

Ссылка на данные

Настройка компонента для работы с Axios

Загружаем библиотеку Axios:

npm i axios

Импортируем axios в компонент из которого будем отправлять запросы на сервер:

import axios from 'axios'

Т.к. в проекте мы используем React Hooks, импортируем useState и useEffect (подробнее про хуки в реакте читаем по ссылке):

import React, { useEffect, useState } from 'react';

Далее в компонент добавляем следующий код:

function App() {
  
  const [appState, setAppState] = useState();
  
  useEffect(() => {
    const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';
    axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState(allPersons);
    });
  }, [setAppState]);

 
  return (
    <div className="app">
    
    </div>
  );
}

export default App;

Рассмотрим код поближе:

const [appState, setAppState] = useState();

Отвечает за состояние стейта в компоненте:

 useEffect(() => {}, [setAppState])

useEffect будет следить за изменением setAppState и производить ререндер если это необходимо

 const apiUrl=''

сюда подставляем нашу ссылку

axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState(allPersons);
    });

отправляем get запрос на сервер, затем полученные JSON данные сохраняем в стейт

Компонент проверки загрузки

В src создадим папку components. В ней создаем компонент UserData.js и добавляем следующий код:

function UserData(props) {

    const { persons } = props

    if (!persons || persons.length === 0) return <p>Нет данных.</p>

    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>firstName</th>
                        <th>lastName</th>
                        <th>email</th>
                        <th>phone</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        persons.map((person) =>
                            <tr key={person.id}>
                                <td>{person.id}</td>
                                <td>{person.firstName}</td>
                                <td>{person.lastName}</td>
                                <td>{person.email}</td>
                                <td>{person.phone}</td>
                            </tr>
                        )
                    }
                </tbody>
            </table>
      </div>
    )
}

export default UserData

В пропсы компонента мы будем передавать данные полученные с сервера

 if (!persons || persons.length === 0) return <p>Нет данных.</p>

делаем проверку, есть ли данные с сервера

{
                        persons.map((person) =>
                            <tr key={person.id}>
                                <td>{person.id}</td>
                                <td>{person.firstName}</td>
                                <td>{person.lastName}</td>
                                <td>{person.email}</td>
                                <td>{person.phone}</td>
                            </tr>
                        )
                    }

Методом map проходим по массиву с людьми, для каждого человека создаем строку. Не забываем про key.

В папке components создаем LoadingPersonsData.js и вставляем следующий код:

function OnLoadingUserData(Component) {
    return function LoadingPersonsData({ isLoading, ...props }) {
        if (!isLoading) return <Component {...props} />

        else return (
            <div>
                <h1>Подождите, данные загружаются!</h1>
            </div>
        )
    }
}

export default LoadingPersonsData

Код выше это higher-order component в React. В качестве пропсов он принимает другой компонент и затем возвращает какую-либо логику. В нашем случае компонент проверяет isLoading. Пока данные загружаются, мы отображаем сообщение о загрузке, как только isLoading станет false мы возвращаем компонент с данными.

Внесем изменения в наш App.js для возможности проверки загрузки данных.

Импортируем наши компоненты в App.js:

import UserData from './components/UserData'
import OnLoadingUserData from './components/OnLoadingUserData'

Добавляем следующий код:

function App() {

  const DataLoading =  LoadingPersonsData(UserData);

  const [appState, setAppState] = useState(
    {
      loading: false,
      persons: null,
    }
  )

 useEffect(() => {
    setAppState({loading: true})
    const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';
    axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState({
      loading: false,
      persons: allPersons
       });
    });
  }, [setAppState]);


  return (
    <div className="app">
        <DataLoading isLoading={appState.loading} persons={appState.persons} />
    </div>
  );
}

export default App;

 const DataLoading =  LoadingPersonsData(UserData);

Мы создаем новый компонент, приравниваем его к нашему higher-order компоненту и обворачиваем им UserData (компонент отображения данных).

В стейт мы добавляем новое свойство loading: false, по нему мы будем определять загрузку данных с сервера.

<DataLoading isLoading={appState.loading} persons={appState.persons} />

Рендерим компонент и передаем пропсы в наш higher-order компонент.

Добавим немного css и при загрузки данных увидим следующее окно:

А теперь, когда get запрос на сервер завершен успешно, данные получены:

Теперь мы знаем как использовать Axios get с REST API.

Если у вас есть вопросы или пожелания, оставляйте их в комментариях. Буду рад ответить.

• Главная

• Инструкции

• React

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

Axios — клиентская библиотека HTTP, которая позволяет отправлять запросы (реквесты) к заданной конечной точке. Это может быть, например, внешний API сервиса, который размещен на Timeweb Cloud, или ваш внутренний сервер Node.js.

Зачем использовать Axios в React:

• Он предоставляет хорошие настройки по умолчанию для работы с JSON. 
• Имена функций соответствуют HTTP. Например, для запроса GET вы используете метод .get().
• Библиотека выдаёт ошибки диапазона 400 и 500. Вам не нужно самостоятельно проверять код состояния и выдавать ошибку.
• Можно использовать как на сервере, так и на клиенте.

Если у вас уже есть проект, установите React Axios с помощью npm или любого другого менеджера пакетов:

npm install axios

В этом руководстве вы будете использовать JSON Placeholder API для получения и изменения сведений о публикации.

Как сделать запрос GET

GET позволяет получить данные ресурса. 

Например, перед вами стоит задача забрать последнюю публикацию и отобразить её в пользовательском интерфейсе. Читателям нужен заголовок поста и его тело вместе со всеми элементами: текстом, видео, картинками. Всё это позволяет сделать GET.

В качестве практики получим публикации по отдельности и отобразим их в интерфейсе:

import axios from "axios";
import React from "react";
const baseURL = "https://jsonplaceholder.typicode.com/posts/1";
export default function App() {
  const [post, setPost] = React.useState(null);
  React.useEffect(() => {
    axios.get(baseURL).then((response) => {
      setPost(response.data);
    });
  }, []);
  if (!post) return null;
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

Первый шаг — добавление Axios в проект.  Затем используется хук useEffect. Он включает применение метода .get() для выполнения GET к конечной точке и использование .then() для возвращения ответа.

Ответ возвращается в виде объекта. Сведения представляют собой сообщение со свойствами id, title и body. Они помещаются в часть состояния с именем post, которое отображается в компоненте. 

Это базовый пример использования Axios в проекте. Давайте посмотрим и другие популярные методы. 

Как сделать POST-запрос

Следующая задача — научиться создавать ресурсы. Например, администратору сайта нужно добавить новый пост про облачные серверы. Внешне реализация будет стандартной — в интерфейсе отобразится кнопка, при нажатии на которую создаётся публикация. Вам нужно реализовать логику.

Добавить в ресурс новую информацию позволяет POST. Он должен быть выполнен на конечной точке /posts. В примере кода также появилась кнопка для создания сообщения:

import axios from "axios";
import React from "react";
const baseURL = "https://jsonplaceholder.typicode.com/posts";
export default function App() {
  const [post, setPost] = React.useState(null);
  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);
  function createPost() {
    axios
      .post(baseURL, {
        title: "Hello World!",
        body: "This is a new post about Timeweb Cloud."
      })
      .then((response) => {
        setPost(response.data);
      });
  }
  if (!post) return "No post!"
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={createPost}>Create Post</button>
    </div>
  );
}

Это очень похоже на метод .get(), но новый ресурс, который вы хотите создать, предоставляется в качестве второго аргумента после конечной точки API.

Нажатие на кнопку вызывает функцию createPost. Чтобы сделать POST, вы используете метод .post(). В качестве второго аргумента передаётся свойство объекта, которое указывает, каким должен быть новый пост.

Еще раз используйте .then(), чтобы вернуть ответ и заменить первое сообщение, что вы получили, новым сообщением, которое вы запросили.

Как сделать запрос PUT

PUT нужен для обновления ресурса.

В этом примере вы обновите первый пост. Для этого вы снова создадите кнопку. Но на этот раз она вызовет функцию для обновления поста:

import axios from "axios";
import React from "react";
const baseURL = "https://jsonplaceholder.typicode.com/posts";
export default function App() {
  const [post, setPost] = React.useState(null);
  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);
  function updatePost() {
    axios
      .put(`${baseURL}/1`, {
        title: "Hello World!",
        body: "This is an updated post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }
  if (!post) return "No post!"
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={updatePost}>Update Post</button>
    </div>
  );
}



  


                       
  

В приведенном выше коде вы применяете метод .put(). Как и в случае с методом .post(), вы указываете свойства, которые должны быть в обновленном ресурсе. Возвращаемые данные добавляются в JSX с помощью .then().

Как сделать запрос DELETE

Наконец, используем Axios, чтобы удалить ресурс. Для этого есть метод DELETE. 

В качестве примера удалите первый пост. Обратите внимание, что вам не нужен второй аргумент для выполнения этого реквеста:

import axios from "axios";
import React from "react";
const baseURL = "https://jsonplaceholder.typicode.com/posts";
export default function App() {
  const [post, setPost] = React.useState(null);
  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);
  function deletePost() {
    axios
      .delete(`${baseURL}/1`)
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }
  if (!post) return "No post!"
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

В большинстве случаев вам не нужны сведения, возвращаемые методом .delete(). Но в приведенном выше коде .then() по-прежнему применяется. Пользователь получает предупреждение о том, что пост успешно удален. Затем данные поста удаляются из состояния. Для них устанавливается начальное значение null.

Как создать экземпляр с помощью Axios

В примерах кода реализован элемент baseURL, который вы используете как часть конечной точки. Каждый раз писать его заново немного утомительно. Решение — создать экземпляр с помощью метода .create(). Axios запомнит baseURL, а также другие значения, которые вы, возможно, захотите указать для каждого реквеста, включая заголовки:

import axios from "axios";
import React from "react";
const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});
export default function App() {
  const [post, setPost] = React.useState(null);
  React.useEffect(() => {
    client.get("/1").then((response) => {
      setPost(response.data);
    });
  }, []);
  function deletePost() {
    client
      .delete("/1")
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }
  if (!post) return "No post!"
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

Одно свойство в объекте конфигурации выше — это baseURL, которому вы передаете конечную точку. Функция .create() возвращает только что созданный экземпляр, который в нашем случае называется client.

В дальнейшем вы можете применять все те же методы, что и раньше, но вам больше не нужно включать baseURL в качестве первого аргумента. Вам просто нужно указать конкретный маршрут, который вы хотите, например, ‘/’, ‘/1’ и так далее. Такой подход помогает создать компактный клиент HTTP.

Как обрабатывать ошибки

Что делать, если при создании запроса возникла ошибка? Например, вы можете передать неправильные данные, обратиться к неправильной конечной точке или получить сетевую ошибку.

Чтобы имитировать ошибку, обратитесь к несуществующей конечной точке API /posts/asdf. В результате должен вернуться код состояния 404:

import axios from "axios";
import React from "react";
const baseURL = "https://jsonplaceholder.typicode.com/posts";
export default function App() {
  const [post, setPost] = React.useState(null);
  const [error, setError] = React.useState(null);
  React.useEffect(() => {
    // invalid url will trigger an 404 error
    axios.get(`${baseURL}/asdf`).then((response) => {
      setPost(response.data);
    }).catch(error => {
      setError(error);
    });
  }, []);
  if (error) return `Error: ${error.message}`;
  if (!post) return "No post!"
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

В этом случае вместо выполнения .then() Axios выдаст ошибку и запустит функцию обратного вызова .catch(). В этой функции мы берём сведения об ошибке и помещаем их в состояние, чтобы предупредить пользователя о проблеме. Когда вы запустите этот пример кода, то увидите текст «Ошибка: запрос не выполнен с кодом состояния 404».

Заключение

Мы рассмотрели несколько операций, которые можно выполнить в React-приложении с помощью Axios. Это лишь основы, но даже на их примере заметны простота и удобство библиотеки.

Больше информации об использовании библиотеки в связке с React смотрите в официальной документации.

In the tech industry, many frontend frameworks are popular, and React is one of them. With any backend language using this framework is not easy. To communicate with the database developers have to follow a specific rule, and they have to write a certain line of code. 

In React communicating with the backend server is done via HTTP protocol. If you’re a developer, then you might have been familiar with the XML Http Request interface and Fetch API. It allows you to fetch data and make HTTP requests.  

This one is the common method to communicate with the database in React. In React there is another method to communicate with the backend server and that requires the installation of a popular library Axios. 

In this article, we are going to discuss this library, its key features, and how Axios work in different cases while communicating with the database. 

Introduction to Axios: Axios, which is a popular library is mainly used to send asynchronous HTTP requests to REST endpoints. This library is very useful to perform CRUD operations.

1. This popular library is used to communicate with the backend. Axios supports the Promise API, native to JS ES6.
2. Using Axios we make API requests in our application. Once the request is made we get the data in Return, and then we use this data in our project. 
3. This library is very popular among developers. You can check on GitHub and you will find 78k stars on it. 

Before you install Axios your React project app should be ready to install this library. Create a React application following the steps given below…

• Step 1: Below is the command to create React app in your project…

  npx create-react-app new_files

• Step 2: Enter in the directory created in the first step.

  cd new_files

• Step 3: Install Axios library using the command given below…

  npm install axios

• Step 4: Once this has been done, you can start the server using the command given below..

  npm start

After Axios installation, you can import this library into your file and use it to make an HTTP request. Below is the code snippet of a file where the library is imported at the top…

The above example is just a small code description to showcase how to use Axios in your project. We will discuss multiple methods such as GET, POST, PUT in Axios in the upcoming section.

Need of Axios in React: As we have discussed that Axios allows you to communicate with the APIs in your React project. The same tasks can also be performed by using AJAX, but Axios provide you more functionality and features and that helps you in building your application quickly. 

Axios is a promise-based library, so you need to implement some promise-based asynchronous HTTP requests. jQuery and AJAX also perform the same job but in React project React handles each and everything in its own virtual DOM, so there is no need to use jQuery at all.     

Below is an example to fetch the customer’s data using Axios…

Now let’s come to the next point and understand how different operations can be performed such as fetching the data or consuming the data using Axios (GET-POST-DELETE).

GET Request with Axios: Create a component MyBlog and hook it into the component DidMount lifecycle. Import the Axios at the top and fetch the data with Get request.

Here we are using axios.get (URL) to get a promise that returns a response object. Returned response is assigned to the post’s object. We can also retrieve other information such as status code etc.

POST Request with Axios: Create a new component AddPost for Post requests. This request will add a post to the post list. 

In the above code, we have made an HTTP Post request and added a new post to the database. The onChange event triggers the method handleChange() and updates the request when the API request returns the data successfully.

Delete Request With Axios: To send the delete request to the server axios.delete is used. You need to specify two parameters while making this request URL and optional config. 

axios.delete(url, { 
  data: { foo: "bar" }, 
  headers: { "Authorization": "******" } 
}); 

While sending the delete request you will have to set the request body and headers. Use config.data for this purpose. In the above POST request, modify the code as given below…

Response Objects in Axios: When you send a request to the server, you receive a response object from the server with the properties given below…

• data: You receive data from the server in payload form. This data is returned in JSON form and parse back into a JavaScript object to you.
• status: You get the HTTP code returned from the server.
• statusText: HTTP status message returned by the server.
• headers: All the headers are sent back by the server.
• config: original request configuration.
• request: actual XMLHttpRequest object.

Error Object: You will get an error object if there will be a problem with the request. Promise will be rejected with an error object with the properties given

• message: Error message text. 
• response: Response object (if received). 
• request: Actual XMLHttpRequest object (when running in a browser). 
• config: Original request configuration. 

Features of Axios Library

• JSON data is transformed automatically.
• It transforms the request and response data.
• Useful in making HTTP requests from Node.js
• It makes XMLHttpRequests from the browser.
• Provide client-side support for protecting against XSRF.
• Supports promise API.
• Ability to cancel the request.

Shorthand Methods in Axios: Below are some shorthand methods of Axios…

• axios.request(config)
• axios.head(url[, config])
• axios.get(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.delete(url[, config])
• axios.options(url[, config])
• axios.patch(url[, data[, config]])

Conclusion

This article explained everything about Axios library. We have discussed some useful operations such as fetching the data, posting the data, updating the data, or deleting the data in Axios. Once you will start working on React, you will have to use this library to communicate with the database server. So it is important to make a practice of it and understand how things work in Axios.

Last Updated :
12 Apr, 2023

Like Article

Save Article