Асинхронный JavaScript

В этой статье мы поговорим об асинхронном Javascript.

Что такое асинхронный JavaScript и чем он отличается от синхронного JavaScript?

Традиционно в синхронном javascript код выполняется построчно, а вывод выводится в соответствии с последовательностью в коде, тогда как в асинхронном javascript блоки кода не выполняются построчно.

В асинхронном javascript мы используем функции обратного вызова, чтобы процесс работал в последовательном порядке. Посмотрите на приведенный ниже код и выведите, что мы использовали setTimeout (function_, time (в мс)). Посмотрите на приведенный ниже код и вывод:

const store = {
  fruits : ['apple','strawberry','pineapple','mango','banana'],
  liquid : ['water', 'ice'],
  holder : ['cone', 'cup', 'stick'],
  toppings : ['chocolate','peanuts']
  };

let order = (fruit_no,call_production) =>{
  setTimeout(() =>{
    console.log("order placed");
    call_production(store.fruits[fruit_no]);
  },2000)
}

let production = (fruit_name) =>{
  setTimeout(() =>{
    console.log('production has stared');
    setTimeout(() =>{
      console.log(`cutting ${fruit_name}`);
      setTimeout(() =>{
        console.log('adding water and ice');
        setTimeout(() =>{
          console.log('starting machine');
          setTimeout(() =>{
            console.log('select the container');
            setTimeout(() => {
              console.log('select Toppings');
              setTimeout(()=>{
                console.log('serving ice cream!!!')
              },2000) 
            },3000)
          },2000)
        },1000)
      },1000)
    },2000);
  },0000);
}

order(0,production);

взглянув на приведенный выше код, мы можем понять, насколько он сложен для понимания и очень запутан в коде, если мы не используем отступы, было бы катастрофой понять этот код. Этот код выглядит очень простым и называется обратным вызовом. ад. Потому что этот код выглядит как приведенная ниже структура, называемая callback hell.

Чтобы преодолеть это, мы используем промисы, и структура промисов выглядит так:

Чтобы понять, как работают промисы, сначала нам нужно понять цикл промисов.