Share This
Связаться со мной
Крути в низ
Categories
//Асинхронный JavaScript для начинающих

Асинхронный JavaScript для начинающих

Основа современной веб-разработки – асинхронное выполнение кода. В небольшой статье разберемся, как освоить этот подход, используя JavaScript. Обсудить

asinhronnyj javascript dlja nachinajushhih 56afdb8 - Асинхронный JavaScript для начинающих

Перевод публикуется с сокращениями, автор оригинальной статьи Devanshi Tank.

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

Для понимания асинхронности недостаточно знать только core JavaScript. Движок JS состоит из трех основных частей:

  • поток выполнения;
  • память/переменная среда;
  • стек вызовов.

Можно добавить в этот список API браузеров, Promises, Eventloop, Task queue и Microtask queue.

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

asinhronnyj javascript dlja nachinajushhih 86bd912 - Асинхронный JavaScript для начинающих

Вот эти возможности браузера: Dev Tools, Console, Sockets, Network Requests, Rendering (HTML DOM), Timer и т. д. JavaScript включает в себя набор функций, которые выглядят обычными, но на самом деле являются средством взаимодействия с веб-браузером. Примерами таких функций являются:

  • объект документа, который ссылается на HTML DOM;
  • функция fetch, взаимодействующая с Network Requests;
  • функция setTimeOut(), ссылающаяся на таймер.

Попробуем разобраться в следующем фрагменте кода:

         function printHello()  {    console.log('Hello'); } setTimeOut(printHello, 1000); console.log('Me First');     

Определение функции printHello будет сохранено в глобальной памяти. Функция setTimeOut установит таймер на 1000 мс, чтобы вызвать после его завершения printHello. Как только setTimeOut все это проделает, произойдет переход на следующую строку и консоль выведет «Me First».

Тем временем таймер работает: как только он завершит свою работу, вызовется функция printHello. Поток управления вернется JavaScript, и напечатается «Hello».

Это был простой пример, но что делать, когда нужно выполнить тысячи строк асинхронного кода? Необходимы некоторые правила, чтобы поток выполнения работал как нужно.

         function printHello() {  console.log('Hello'); } function blockfor1sec() { //блокирует поток на одну секунду } setTimeOut(printHello, 0); blockfor1sec(); console.log('Me First');     

В приведенном примере, поскольку таймер равен 0 мс, можно было бы предположить, что он немедленно запускает printHello, но этого не происходит.

Для этого JavaScript есть Callback Queue. printHello помещается в нее и остается там до тех пор, пока движок JS не выполнит весь синхронный код. Event Loop проверяет стек вызовов на пустоту, а также завершено ли выполнение всего глобального кода.

Как только все будет сделано, Event Loop извлекает функцию printHello из очереди обратного вызова и помещает ее в стек вызовов.

         console --------- Me first Hello     

Функция printHello выполняется после глобального кода. С этим подходом есть некоторые проблемы. Предположим, что функция в setTimeOut извлекает некоторые данные из API, а затем запускает другую функцию с этими данными, которые мы не сможем контролировать. Это происходит, поскольку данная функция автоматизирована с помощью setTimeOut. Информация, которую она несет и возвращаемый ответ ограничены ею же. С этой ситуацией легче справиться с помощью Promises.

Promises

asinhronnyj javascript dlja nachinajushhih e009630 - Асинхронный JavaScript для начинающих

Большая часть нашего кода JavaScript выполняется с помощью функций браузера, но у нас нет доступа к скрытому в его глубине бекенду. Новая возможность ES6 обещает помочь получить некоторую согласованность между происходящим в фоновом режиме и нашей фактической памятью JavaScript, чтобы обрабатывать результат. В ES5 использовалась fetch/xhr для получения сетевого запроса, но это не влияло на фактическую память. С введением промисов fetch должна совершать сетевой запрос и возвращать объект Promise, который будет находиться в памяти. Как только запрос выполнится, объект будет заполнен данными из него.

Промисы можно лучше понять, опираясь на два подхода. Первый указывает на выполняемые через функции браузера фоновые процессы, а второй является отслеживающим запросом объекта Promise в памяти.

Использование этих двух подходов поможет сделать следующее:

  • инициировать фоновую работу веб-браузера;
  • немедленно возвратить объект-заполнитель (promise) в JavaScript.
         function display(data) {   console.log(data); } const futureData = fetch('https//somelink.com'); futureData.then(display); console.log('Me first');     

Приведенный фрагмент иллюстрирует простой promise. Получаемое нами обратно из запроса значение хранится в futureData и в свою очередь передается в качестве параметра (data) для функции display. Чтобы понять, как все это работает, рассмотрим, что именно делает fetch.

asinhronnyj javascript dlja nachinajushhih 6fa755b - Асинхронный JavaScript для начинающих

Функция fetch – одна из важных функций JS. С ее помощью устанавливается объект Promise в памяти JS. Он имеет два свойства: value, в котором хранятся данные ответа, и onFulfilled, который является пустым массивом.

Он также инициирует функцию браузера Network Request для отправки запроса HTTP и получения ответа. Все это вместе с запросом хранится в переменной futureData, которая в свою очередь является объектом promise: futureData.value = response data

Мы также должны понять, какова цель onFulfilled[ ]. Это скрытое свойство объекта Promise, к которому нельзя получить доступ. Как только свойство value получает некоторое значение, свойство onFulfilled автоматически выполняет функцию, которая должна использовать данные из ответа – именно она хранится в массиве onFulfilled. В приведенном выше фрагменте кода, как только свойство value получает ответ, запускается функция display, и данные передаются в качестве аргумента для onFulfilled.

На данном этапе может возникнуть вопрос, как добавить функцию к onFulfilled массиву? Мы не можем использовать array.push(), так как это скрытое свойство. Вместо этого применим метод then, что значительно облегчает жизнь.

asinhronnyj javascript dlja nachinajushhih f8ef379 - Асинхронный JavaScript для начинающих

Еще один важный нюанс – обработка ошибок в Promise, вроде неудачного запроса или нулевых данных. Существует множество случаев, когда сетевой запрос может завершиться неудачей. Чтобы решить эту проблему, объект Promise имеет еще одно скрытое свойство onRejection, которое является пустым массивом.

Мы можем использовать метод .catch(), чтобы добавить к нему функцию. Эта функция будет вызвана onRejection и выполнена в случае, если мы получим ошибку.

И напоследок

Наконец, нам нужно знать, как Promise-deferred функция возвращается в JavaScript для выполнения. В JS есть функция, очень похожая на Callback queue, которая называется Microtask Queue. Пока выполняется сетевой запрос и извлекаются данные, функция, связанная с объектом Promise, помещается в Microtask Queue.

Как только все данные из ответа получены, она извлекается из Microtask Queue, попадает в callstack через event loop и выполняется.

Microtask Queue имеет более высокий приоритет, чем очередь Callback, поэтому функции, связанные с другими асинхронными функциями (вроде setTimeOut()), выполняются после выполнения функций объекта Promise.

Заключение

Мы рассмотрели важную и ответственную тему и надеемся, что статья окажется для вас полезной. В «Библиотеке программиста» есть несколько материалов, которые помогут ее дополнить:

  • async/await в JavaScript: преимущества и подводные камни
  • 9 полезных советов по Promise.resolve и Promise.reject
  • TOП-12 JavaScript-концепций: от ссылок до асинхронных операций
  • Асинхронное программирование: концепция, реализация, примеры
  • Цикл событий: как выполняется асинхронный JavaScript-код в Node.js
  • Глубокое погружение в асинхронные JavaScript функции

Не останавливайтесь на достигнутом и удачи в обучении!

  • 2 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    Roman Spiridonov
    Roman Spiridonov

    Привет ! Мне 38 лет, я работаю в области информационных технологий более 4 лет. Тут собрано самое интересное.

    Our Instagram 04.

    Categories 05.

    © Speccy 2020 / All rights reserved

    Связаться со мной
    Close