Должен ли я использовать Fetch или Axios при отправке HTTPS-запросов?

Если вы не можете долго оставаться, вот короткая версия:

• Последовательность выполнения HTTPS-запроса
• Axios незаметно использует XMLHttpRequest для отправки HTTPS-запросов
• XMLHttpRequest устарел, чем новый Fetch API
• Fetch API – это собственный веб-API.
• Fetch требует дополнительных действий для подготовки данных JSON (см. ниже)
• Принимая во внимание, что Axios — это библиотека, которую вы можете установить с помощью менеджера пакетов NPM

Если можете, читайте дальше.

Поток выполнения HTTPS-запроса

Повторение основ HTTPS.

Мы делаем HTTPS-запросы из браузера на внешний сервер, обычно там, где находится API (интерфейс прикладного программирования).

1. Вы посещаете веб-сайт по адресу www.medium.com
2. Веб-сайт отображается в вашем браузере
3. Вы входите в свою учетную запись Medium
4. Когда вы нажимаете кнопку входа, выполняется HTTPS-запрос на внутренние серверы Medium.
5. Запрос HTTPS попадает в конечную точку API (назовем это Medium Authentication API).
6. Бэкенд-серверы, на которых размещен API аутентификации, будут обрабатывать HTTPS-запрос при его поступлении.
7. Как только ответ будет готов, внутренние серверы отправят ответ HTTPS вашему браузеру.
8. Поскольку мы не знаем, когда ответ HTTPS вернется с внутреннего сервера, мы используем обещание с использованием синтаксиса .then()
9. Думайте об обещании как об обещании, которое внутренний сервер дает браузеру.
10. Бэкенд-сервер обещает браузеру отправить ответ когда-нибудь в будущем.
11. Когда возвращается ответ HTTPS, обещание разрешается (обещание, данное сервером браузеру, выполняется)
12. Ответ придет через «.then()» — вот так: .then((response) =› response.json())
13. Вот почему мы используем .then() с HTTPS-запросами.

Если вы хотите получить более глубокое представление о HTTPS в целом, вы можете прочитать это:

HTTPS с XMLHttpRequest

Важно отметить, что XMLHttpRequest старше, чем новый Fetch API.

Согласно MDN, Fetch API предоставляет более мощный и гибкий набор функций, чем XMLHttpRequest.

// code from MDN 

To send an HTTP request, create an XMLHttpRequest object, open a URL, and send the request

function reqListener() {
  console.log(this.responseText);
}

const req = new XMLHttpRequest();
req.addEventListener("load", reqListener);
req.open("GET", "http://www.example.org/example.txt");
req.send();

Поскольку в этой статье мы сосредоточимся на Fetch и Axios, мы не будем вдаваться в подробности XMLHttpRequest.

Чтобы узнать больше о XMLHttpRequest, вы можете прочитать больше по следующей ссылке:

HTTPS с выборкой

Вот как сделать HTTPS-запрос с помощью Fetch API.

fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

Обратите внимание, что вам не нужно использовать параметр «options» с fetch. Это для вас, чтобы использовать по желанию. Позже мы рассмотрим этот параметр более подробно.

Из кода видно, что для подготовки данных JSON требуется дополнительный шаг:

.then((response) => response.json())

В axios это делается за вас из коробки.

По крайней мере, нам нужно предоставить функции выборки параметр url.

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

Так что же находится в объекте ответа, возвращаемом с внутреннего сервера?

Это фрагмент, взятый с сайта MDN:

Объект Response, в свою очередь, не содержит непосредственно фактического тела ответа JSON, а вместо этого является представлением всего ответа HTTP. Таким образом, чтобы извлечь содержимое тела ответа JSON из объекта Response, мы используем метод json(), который возвращает второе обещание, которое разрешается с результатом анализа текста тела ответа как JSON.

HTTPS с аксиомами

Axios — очень хорошая библиотека, которая упрощает выполнение HTTPS-запросов и значительно облегчает жизнь программистам.

Это всего лишь простой пример того, как быстро приступить к работе с axios, но с помощью axios можно делать гораздо больше вещей.

axios.get(url)
  .then((res) => doSomethingWithData(res.data))
  .catch(error => {
      console.error(error); 
 });

Больше вещей, которые можно сделать с axios, которые будут обновлены.

Если вы хотите узнать, как работает выборка данных в приложении Next.js, вы можете прочитать одну из наших самых популярных статей на эту тему здесь.

Это все для этой статьи!

Если вам нужна помощь в изучении Javascript или в прохождении собеседования по кодированию Javascript, вы можете связаться с нами по адресу [email protected]

Мы регулярно публикуем короткие технические руководства, поэтому рассмотрите возможность подписки на наш блог Medium.

До следующего раза — продолжайте программировать, продвигаясь небольшими шагами вперед в этом своем приключении.

Но что еще более важно, оставайтесь сосредоточенными!