logo

TechCodeview

Axios у React: посібник для початківців

У React серверний зв’язок зазвичай досягається за допомогою протоколу HTTP. Хоча багато розробників знайомі з інтерфейсом XML HTTP-запитів і Fetch API для створення HTTP-запитів, існує ще одна потужна бібліотека під назвою Axios, яка ще більше спрощує процес.

Зміст



Вступ до Axios:

Axios, яка є популярною бібліотекою, в основному використовується для надсилання асинхронних запитів HTTP до кінцевих точок REST. Ця бібліотека дуже корисна для виконання операцій CRUD.

  1. Ця популярна бібліотека використовується для зв’язку з серверною частиною. Axios підтримує Promise API, рідний для JS ES6.
  2. Використовуючи Axios, ми робимо запити API у нашій програмі. Після того, як запит зроблено, ми отримуємо дані в Return, а потім використовуємо ці дані в нашому проекті.
  3. Ця бібліотека дуже популярна серед розробників. Ви можете перевірити на GitHub, і ви знайдете на ньому 78 тисяч зірок.

Перш ніж встановити Axios, ваша програма проекту React має бути готова до встановлення цієї бібліотеки. Створити Реагувати додаток, виконавши наведені нижче дії…

Кроки для створення програми React:

Крок 1: Нижче наведено команду для створення програми React у вашому проекті…



npx create-react-app myreactapp>

Крок 2: Увійдіть до каталогу, створеного на першому кроці.

cd myreactapp>

крок 3: Встановіть бібліотеку Axios за допомогою наведеної нижче команди…

npm i axios>

Структура проекту:



Скріншот-від-2023-10-06-09-44-29

шехзад пунавала

Оновлені залежності в package.json файл.

'dependencies': {  '@testing-library/jest-dom': '^5.17.0',  '@testing-library/react': '^13.4.0',  '@testing-library/user-event': '^13.5.0',  'axios': '^1.6.2',  'react': '^18.2.0',  'react-dom': '^18.2.0',  'react-scripts': '5.0.1',  'web-vitals': '^2.1.4' },>

приклад: Цей фрагмент коду використовує axios для надсилання HTTP-запиту до внутрішнього сервера.

Javascript




// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> class App extends React.Component {> >state = {> >newfiles:>null>,> >};> >handleFile(e) {> >// Getting the files from the input> >let newfiles = e.target.newfiles;> >this>.setState({ newfiles });> >}> >handleUpload(e) {> >let newfiles =>this>.state.newfiles;> >let formData =>new> FormData();> >// Adding files to the formdata> >formData.append(>'image'>, newfiles);> >formData.append(>'name'>,>'Name'>);> >axios({> >// Endpoint to send files> >url:>' http://localhost:8080/files '>,> >method:>'POST'>,> >headers: {> >// Add any auth token here> >authorization:>'your token comes here'>,> >},> >// Attaching the form data> >data: formData,> >})> >// Handle the response from backend here> >.then((res) =>{})>> >// Catch errors if any> >.>catch>((err) =>{});>> >}> >render() {> >return> (> >> >> > type='file' // To select multiple files multiple='multiple' onChange={(e) =>this.handleFile(e)} /> onClick={(e) => this.handleUpload(e)}> Надіслати файли ); } } експорт програми за замовчуванням;> 

>

>

Кроки для запуску програми: Відкрийте термінал і введіть таку команду.

npm start>

Вихід: Відкрийте браузер, і наш проект буде показано в URL-адресі http://localhost:3000/

Наведений вище приклад є лише невеликим описом коду, щоб продемонструвати, як використовувати Axios у вашому проекті. У наступному розділі ми обговоримо кілька методів, таких як GET, POST і PUT в Axios.

Необхідність Axios у React:

Як ми вже обговорювали, Axios дозволяє вам спілкуватися з API у вашому проекті React. Ці ж завдання також можна виконувати за допомогою AJAX, але Axios надає вам більше функціональних можливостей і можливостей, що допомагає швидко створювати вашу програму.

Axios — це бібліотека на основі обіцянок, тому вам потрібно реалізувати деякі асинхронні HTTP-запити на основі обіцянок. jQuery та AJAX також виконують однакову роботу, але в проекті React React обробляє все і все у власному віртуальному DOM, тому немає потреби використовувати jQuery взагалі.

Нижче наведено приклад отримання даних клієнта за допомогою Axios…

Javascript




реверсування рядка java
const getCustomersData = () =>{> >axios> >.get(>' https://jsonplaceholder.typicode.com/customers '>)> >.then(data =>console.log(data.data))> >.>catch>(error =>console.log(помилка));> };> getCustomersData();> 

>

>

Тепер давайте перейдемо до наступного пункту та зрозуміємо, як можна виконувати різні операції, такі як отримання даних або споживання даних за допомогою Axios (GET-POST-DELETE).

ОТРИМАЙТЕ запит за допомогою Axios:

Створіть компонент MyBlog і підключіть його до життєвого циклу компонента DidMount. Імпортуйте Axios у верхній частині та отримайте дані за допомогою запиту Get.

Javascript




// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class MyList extends React.Component {> >state = {> >blogs: [],> >};> >componentDidMount() {> >axios> >.get(> >`https:>//jsonplaceholder.typicode.com/posts`> >)> >.then((response) =>{> >const posts = response.data;> >this>.setState({ posts });> >});> >}> >render() {> >return> (> >>
    > >{>this>.state.posts.map((post) =>{> >post.title;> >})}> >>
>);> >}> }> 

>

>

Тут ми використовуємо axios.get (URL), щоб отримати обіцянку, яка повертає об’єкт відповіді. Повернена відповідь призначається об’єкту публікації. Ми також можемо отримати іншу інформацію, наприклад код статусу тощо.

Запит POST з Axios:

Створіть новий компонент AddPost для запитів на публікацію. Цей запит додасть публікацію до списку публікацій.

Javascript


методи списку java



// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class AddPost extends React.Component {> >state = {> >postTitle:>''>,> >};> >handleChange = (event) =>{> >this>.setState({ postTitle: event.target.value });> >};> >handleSubmit = (event) =>{> >event.preventDefault();> >const post = {> >postName:>this>.state.postName,> >};> >axios> >.post(> >`https:>//jsonplaceholder.typicode.com/posts`,> >{ post }> >)> >.then((res) =>{> >console.log(res);> >console.log(res.data);> >});> >};> >render() {> >return> (> >> >'{this.handleSubmit}'>Назва публікації: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add ); } }> 

>

>

У наведеному вище коді ми зробили запит HTTP Post і додали нову публікацію до бази даних. Подія onChange запускає метод handleChange() і оновлює запит, коли запит API успішно повертає дані.

Видалити запит за допомогою Axios:

Для надсилання запиту на видалення на сервер використовується axios.delete. Вам потрібно вказати два параметри під час створення URL-адреси запиту та додаткової конфігурації.

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

Під час надсилання запиту на видалення вам потрібно буде встановити тіло запиту та заголовки. Для цього використовуйте config.data. У наведеному вище запиті POST змініть код, як наведено нижче…

Javascript




детерміновані кінцеві автомати
handleSubmit = event =>{> >event.preventDefault();> >axios.>delete>(> >`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)> >.then(res =>{> >console.log(res);> >console.log(res.data);> >})> }> 

>

>

Об’єкти відповіді в Axios:

Коли ви надсилаєте запит на сервер, ви отримуєте об’єкт відповіді від сервера з наведеними нижче властивостями…

  • дані: Ви отримуєте дані з сервера у формі корисного навантаження. Ці дані повертаються у формі JSON і аналізуються назад у об’єкт JavaScript.
  • статус: Ви отримуєте HTTP-код, повернутий із сервера.
  • statusText: Повідомлення про статус HTTP, повернуте сервером.
  • заголовки: Усі заголовки повертаються сервером.
  • конфігурація: вихідна конфігурація запиту.
  • запит: фактичний об'єкт XMLHttpRequest.

Об'єкт помилки:

Ви отримаєте об’єкт помилки, якщо виникне проблема із запитом. Promise буде відхилено з помилковим об’єктом із заданими властивостями

  • повідомлення: Текст повідомлення про помилку.
  • відповідь: Об'єкт відповіді (якщо отримано).
  • запит: Фактичний об’єкт XMLHttpRequest (під час роботи в браузері).
  • конфігурація: Оригінальна конфігурація запиту.

Особливості бібліотеки Axios

  • Дані JSON трансформуються автоматично.
  • Він перетворює дані запиту та відповіді.
  • Корисно для створення HTTP-запитів із Node.js
  • Він робить XMLHttpRequests із браузера.
  • Надайте клієнтську підтримку для захисту від XSRF.
  • Підтримує API обіцянок.
  • Можливість скасувати заявку.

Методи скорочення в Axios:

Нижче наведено деякі скорочені методи Axios…

  • axios.request(config)
  • axios.head(url[, config])
  • axios.get(url[, config])
  • axios.post(url[, дані[, конфігурація]])
  • axios.put(url[, дані[, конфігурація]])
  • axios.delete(url[, config])
  • axios.options(url[, config])
  • axios.patch(url[, дані[, конфігурація]])

Висновок

Ця стаття пояснила все про бібліотеку Axios. Ми обговорили деякі корисні операції, такі як отримання даних, публікація даних, оновлення даних або видалення даних в Axios. Як тільки ви почнете працювати над React, вам доведеться використовувати цю бібліотеку для зв’язку з сервером бази даних. Тому важливо попрактикуватися в цьому та зрозуміти, як все працює в Axios.