Прежде чем мы начнем, попытайтесь выяснить вывод для следующего фрагмента кода.

let promiseObj = new Promise(
    function(resolve, reject) { resolve(1) }
 );
promiseObj.then((resolve) => { console.log(1) } );
console.log('a');
setTimeout(() => { console.log('h') }, 0);
console.log('b');

Понимание через аналогию

Если вы индус или знаете об Индии, вы, очевидно, знаете о системе бронирования (приоритет) в Индии. А пока давайте рассмотрим 3 объекта для нашего объяснения.

  1. Правительство
  2. Лицо, принадлежащее к какой-либо зарезервированной категории (лицо А)
  3. Лицо, относящееся к категории GM (лицо B)

У правительства Индии есть свой набор задач, которые оно выполняет для воспитания нации. Давайте рассмотрим как человека А, так и человека Б, у нас есть некоторые вопросы и задачи, которые правительство должно выполнить, чтобы они были удовлетворены.

Давайте посмотрим на 3 объекта в действии!

Правительство начинает выполнять свою задачу, начиная с момента времени — t0. Человек Б хочет, чтобы правительство выполнило некоторые задачи, поэтому он обращается к правительству вовремя — t1 и задает свои вопросы, правительство. принимает их просьбу и говорит им:

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

Услышав это, Человек Б возвращается счастливым. Через некоторое время человек А хочет, чтобы некоторые задачи были выполнены, поэтому они обращаются к правительству. и выдвинули свой запрос во время — t2. правительство говорит то же самое человеку А, и человек счастливо возвращается.

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

А теперь поворот!

Правительство вместо того, чтобы взять на себя задачу Человека Б, берет на себя задачу Человека А!!. Почему?

Поскольку человек А имеет более высокий приоритет в соответствии с системой бронирования, поэтому правительство. сначала выполняет задачи лица А, а затем лица Б.

Расшифровка аналогии!

Здесь «Задачи правительства» представляет собой синхронный код в javascript. Задачи человека А представляют собой обратные вызовы, а задачи человека Б представляют обещания в javascript.

Javascript имеет много очередей, которые он использует вместе с event-loop для обработки асинхронного кода (ниже мы рассмотрим 2 такие очереди). Теперь, когда мы знаем, что обещания обрабатываются до обратных вызовов, давайте теперь разберемся и найдем вывод для приведенного выше фрагмента кода.

1. let promiseObj = new Promise(
2.    function(resolve, reject) { resolve(1) }
3. );
4. promiseObj.then((resolve) => { console.log(1) } );
5. console.log('a');
6. setTimeout(() => { console.log('h') }, 0);
7. console.log('b');

JS сначала анализирует весь код и сначала выполняет синхронный код, который включает

console.log('a') //Line number 4
console.log('b') //Line number 7
Output
a 
b

Позже он переключает внимание на обещания и обратные вызовы.

Примечание. setTimeout не является частью javascript, это часть веб-API, предоставляемого браузером. setTimeout сопоставляется с API под названием Timer, присутствующим в браузере.

В строке номер 1 мы создаем обещание, используя ключевое слово new, которое возвращает объект обещания, который мы сохраняем внутри переменной с именем promiseObj. Возвращаемый объект обещания имеет много свойств, одно из них включает .then().

.then() используется для определения функции, которая должна быть выполнена после разрешения промиса. Итак, в приведенном выше примере мы определяем функцию (строка номер 4), которая просто выводит на консоль 1 внутри .then().

promiseObj.then((resolve) => { console.log(1) } );

Эта вышеприведенная функция, которую мы объявили, помещается в JOB QUEUE.

В setTimeout мы явно указываем функцию, которая будет автоматически запускаться или вызываться (функция обратного вызова) по истечении указанного интервала времени. Несмотря на то, что временной интервал, который мы указали, равен 0, функция помещается в очередь CALLBACK.

Теперь весь синхронный код выполнен, теперь цикл событий сначала ищет очередь заданий. Почему? Потому что очередь заданий имеет больший приоритет (как и человек А). Таким образом, у нас есть наша функция, присутствующая в очереди заданий, которая выполняется первой, и консоль записывает 1.

Output
a
b
1

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

() => { console.log('h') }, 0

Следовательно, «h» записывается в самом конце.

Output
a //sync
b //sync
1 //promise
h //callback

Сводка

В JS весь синхронный код выполняется первым.

ES6 имеет 2 очереди

  1. очередь заданий
  2. Очередь обратного звонка

Очередь заданий имеет более высокий приоритет, чем очередь обратного вызова

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

(Если вы считаете эту статью полезной, поддержите ее, поделившись ею с теми, кому она может быть полезна. Спасибо)