Неделя 5 — Обещания, обещания, обещания

API-коммуникация является ключевым моментом в том, как веб-сайты общаются между собой, и именно здесь JavaScript сияет. Эта статья блога посвящена тому, как JavaScript работает с использованием Promises и Fetch.

Используются следующие основные ресурсы:

  • Основной ресурс — LearnJavaScript.online

Что было изучено

Обещания были главным предметом моего недельного пересмотра, наряду с функцией fetch.

Обещания обеспечивают функциональность для достижения асинхронной связи между клиентами и серверами. Когда клиент и сервер общаются, поток связи может занять определенное время для ответа. В этом случае синхронная коммуникация начинает падать, поскольку она блокирует или, другими словами, замораживает приложение.

Асинхронное программирование позволяет приложениям быть неблокирующими, что позволяет приложению продолжать обработку, но также позволяет общаться между клиентом и сервером в фоновом режиме. Обещания являются ключом к тому, чтобы это работало.

Объект Promises в JavaScript позволяет обмениваться данными между клиентом и сервером. Клиент подключается к серверу через URL. Сервер возвращает обещание, обеспечивая обмен потоком связи между клиентом и сервером, но давая время на отправку данных. Следующий пример кода демонстрирует, как функция API может вернуть Promise, когда к ней обратился клиент:

function getMyAPI(ip){
    return new Promise((resolve, reject) => {
           if(ip === "127.0.0.1"){
                reject("No local host addresses please...");
           }
           resolve({
                msg: "Yay you got my message...";
           });
    })
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Результат этого примера кода можно разделить на три этапа:

  • Ожидание — состояние, которое используется, когда осуществляется коммуникация
  • Выполнено — Когда коммуникация завершена, даже если есть ошибка 404
  • Отклонено — коммуникация не состоялась, возможно, из-за проблем с сетью.

Функция resolve обеспечивает выполненное состояние обещания, именно здесь данные обычно отправляются обратно в формате JSON.

Функция reject предоставляет ошибку для коммуникационного потока, чтобы разработчики могли обработать результат.

Теперь это должно напомнить вам о другом типе функциональности — структуре try-catch.

try {
   // handle success
} catch {
   // handle error
}
Вход в полноэкранный режим Выход из полноэкранного режима

Для обработки обещания, которое возвращает API, мы можем использовать следующий пример кода:

    fetch("fakeSite").then(response => response.json()).then(data => console.log(data)).catch(error => console.log(error));
Вход в полноэкранный режим Выйти из полноэкранного режима

В этом примере функция fetch возвращает обещание, которое обрабатывается функцией then. Это обрабатывает ответ от API. Часть самой функции .json() возвращает еще одно обещание, которое мы можем снова использовать функцию .then для обработки данных. Наконец, функция .catch асинхронно обрабатывает любые ошибки, предотвращая блокировку приложения.

Наконец, для обработки данных второй функции then мы должны рассмотреть возможность передачи данных в функцию, в данном случае мы использовали console.log, но мы можем отправить их, например, в базу данных. Мы делаем это потому, что данные не выходят за рамки функции then.

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

Обзор ресурса

LearnJavaScript был отличным ресурсом для изучения этой важной концепции. LearnJavaScript смог объяснить концепцию с помощью пошагового подхода, на основе которого строится каждый урок. Одним из наиболее важных понятий для изучения promises было сравнение со структурой try catch. Обычно трудная для многих концепция, LearnJavaScripts пошагово разбивает ее на подходящие компоненты.

Ретроспектива

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

На следующей неделе я постараюсь применить взаимодействие со сторонними разработчиками, чтобы дополнить полученные на данный момент знания.

Подпись

Это был поворотный момент в течение недели, который показал, насколько профессиональным может быть JavaScript.

До следующей недели!

Джек/eXit

Оцените статью
Procodings.ru
Добавить комментарий