В JavaScript было действительно важно знать, как выполнять HTTP-запросы и получать динамические данные с сервера / базы данных.
JavaScript предоставляет некоторые встроенные объекты браузера и некоторые внешние библиотеки с открытым исходным кодом для взаимодействия с API.
Вот возможные способы вызова API:
- XMLHttpRequest
- принести
- Axios
- jQuery
XMLHttpRequest
До выхода ES 6 единственным способом сделать HTTP-запрос в JavaScript был XMLHttpRequest. Это встроенный объект браузера, который позволяет нам делать HTTP-запросы в JavaScript.
JSONPlaceholder - это бесплатный онлайн-REST API, который вы можете использовать всякий раз, когда вам нужны поддельные данные.
По умолчанию мы получаем ответ в строковом формате, нам нужно разобрать его в JSON.
XMLHttpRequest устарел в ES 6 из-за введения fetch. Но все же мы используем XMLHttpRequest, когда нам нужно работать со старыми браузерами и нам не нужны полифилы.
Получить
Fetch позволяет выполнять HTTP-запрос аналогично XMLHttpRequest, но с простым интерфейсом с использованием обещаний. Он не поддерживается старыми браузерами (может быть полифиллен), но очень хорошо поддерживается современными. Мы можем сделать вызов API, используя выборку двумя способами.
Метод 1:
Используя Async и Await
API выборки очень мощный. Мы можем легко отправлять запросы AJAX с помощью API выборки браузера. Основным недостатком fetch API является обработка ошибок.
Axios
Axios - это библиотека с открытым исходным кодом для выполнения HTTP-запросов, которая предоставляет множество замечательных функций и работает как в браузерах, так и в Node.js. Это HTTP-клиент, основанный на обещаниях, который можно использовать в простом JavaScript и расширенных фреймворках, таких как React, Vue.js и Angular.
Он поддерживает все современные браузеры, включая поддержку IE 8 и выше.
Установка:
Если вы используете какой-либо из менеджеров пакетов, например npm или yarn.
И включите его в файл HTML следующим образом
Самый простой способ включить Axios - использовать внешний CDN:
Теперь вы можете начать отправку HTTP-запроса, включив следующий скрипт в свой HTML-файл.
Ниже приведены преимущества Axios.
- Axios выполняет автоматические преобразования и возвращает данные в формате JSON.
- Лучшая обработка ошибок
- Axios имеет широкий спектр поддерживаемых браузеров.
jQuery
В jQuery есть много методов для обработки асинхронных HTTP-запросов. Чтобы использовать jQuery, нам нужно включить исходный файл jQuery, а метод $ .ajax () используется для выполнения HTTP-запроса.
$ .ajax ()
Метод $ .ajax принимает множество параметров, некоторые из которых являются обязательными, а другие - необязательными. Он содержит две функции обратного вызова success и error для обработки полученного ответа.
Заключение
Большинство приложений реального времени используют Axios для выполнения HTTP-запросов. Axios - это очень простая библиотека с открытым исходным кодом для выполнения HTTP-запросов.
Я рассмотрел наиболее популярные способы выполнения HTTP-запросов в JavaScript.
Для вашего удобства я добавляю сюда исходный код.
Никто не идеален. Прокомментируйте любые предложения и улучшения.
Спасибо за ваше время.
