В этом блоге мы увидим, как извлекать данные с помощью библиотеки axios, создавая простой проект CRA и сохраняя данные в хуке useState() в реакции, а затем отображая данные в компоненте React.

ЧТО ТАКОЕ АКСИОС?

Axios — это обещанная базовая библиотека JavaScript для управления возможностью вашего кода выходить в Интернет. Общепринято использовать API для подключения ресурсов, обмена данными и доступа к сервисам.

Axios — это современная клиентская HTTP-библиотека на основе Promise. Это означает, что Axios используется для отправки HTTP-запроса и обработки их ответов с использованием обещаний JavaScript. Axios поддерживает в браузере как Node.js, так и JavaScript. Если вы хотите узнать больше, не стесняйтесь ознакомиться с документацией😊

Импорт аксиом и выполнение GET-запроса

Нажмите npm install axios.

установить axios, а затем импортировать его в файл JavaScript, где будет происходить извлечение данных.

Теперь, когда axios установлен, мы можем использовать его, чтобы сделать запрос GET для получения данных из любой конечной точки API. Наша цель — сохранить этот запрос внутри уникальной функции.

  1. Я создал простой проект CRA и импортировал зависимости в файл App.js. Мы создаем простой метод и называем его любым именем, в моем случае getpost(), который будет обрабатывать ответ, используя метод GET axios.

Поскольку Axios — это библиотека, основанная на промисах, поэтому промис должен быть обработан. Я собираюсь использовать «тогда» для обработки промиса, который автоматически сохранит весь ответ в формате JSON. Одна большая и приятная функция в библиотеке axios и Axios помогает сохранить D.R.Y. с экземплярами, перехватчиками и значениями по умолчанию. Это может помочь со сложными приложениями, которые часто отправляют запросы API.

2. Затем мы добавили кнопку с обработчиком событий и несколько основных стилей с помощью Tailwind CSS. Который при нажатии вызывается функция и делает запрос axios к API.

3. Теперь, чтобы вызвать все данные, полученные в функции getpost(), просто добавьте тег span или p HTML и верните эту строку кода.

4. Просто запустите приложение, набрав npm start в своем терминале, и проверьте браузер. Вы увидите случайную шутку, появляющуюся на экране при нажатии кнопки.

Обновите, чтобы получить новый набор шуток. Ура🎉😊 теперь мы успешно вызвали наши данные в нашем браузере, используя axios в React.