Получение данных из API с помощью Axios

Когда я начал изучать и использовать API, я использовал только один метод для получения этой информации, чтобы не потеряться в соусе и убедиться, что у меня действительно есть время для создания своих проектов. В результате я в значительной степени полагался на проверенный метод fetch(), который до сих пор очень часто использую.

Однако, когда я начал работать над более крупными приложениями и расширил свой стек, включив в него Node, я почувствовал себя более комфортно с асинхронным программированием и начал понимать его ценность, особенно для работы с API.

Итак, что такое Axios?

По словам самих Axios, Axios — это HTTP-клиент на основе обещаний для Nodejs и браузера. Он работает в браузере и на node.js, что делает его изоморфным. На стороне сервера он использует http-модуль node.js, а в браузере использует XMLHttpRequests.

Некоторые из его ключевых функций включают в себя поддержку Promise API, отмену запросов, автоматическое преобразование данных в данные JSON, выполнение http-запросов из node.js и создание XMLHttpRequests из браузера.

Хорошо, а как мне его использовать?

Чтобы использовать Axios, вам необходимо установить пакет. Я использую npm, но если вы используете другой пакетный менеджер, загляните в их документацию.

npm install axios

Теперь давайте настроим простой GET-запрос:

const axios = require('axios');
// Make a request
axios.get('the url you want to request from')
     .then(function (response) {     
        // handle success     
        console.log(response);   
     })   
     .catch(function (error) {     
        // handle error     
        console.log(error);   
     })   
     .then(function () {     
        // this always executes   
     });

Точно так же вы можете запрашивать данные из любого API в Интернете. Долгое время я думал, что использование Axios — это такой большой и пугающий пакет, на изучение которого у меня уйдут годы, но, глядя на код, он не похож ни на что, чего я раньше не видел. Так что теперь идите и попробуйте его, посмотрите, предпочитаете ли вы его функциональность методу fetch()!

Удачного кодирования!