JavaScript Async / await Tutorial - Узнайте обратные вызовы, обещания и async / ждут в JS, делая мороженое 🍧🍨🍦

Автор оригинала: Joy Shaheb.

Сегодня мы собираемся построить и запустить Магазин мороженого И учить асинхронный JavaScript в то же время. По пути вы узнаете, как использовать:

Обратные вызовы
Обещания
Async/a ждать

Что такое асинхронный JavaScript?
Синхронный против асинхронного JavaScript
Как обратные вызовы работают в JavaScript
Как обещает работать в JavaScript
Как Async/ждут работает в JavaScript

Так что давайте погрузимся в!

Вы можете посмотреть это учебное пособие на YouTube, если вам нравится:

Если вы хотите эффективно создавать проекты, то эта концепция для вас.

Теория Async JavaScript поможет вам сломать большие сложные проекты на более мелкие задачи.

Тогда вы можете использовать любую из этих трех методов – Обратные вызовы, обещания или Async/ждут – Чтобы запустить эти небольшие задачи таким образом, чтобы вы получили лучшие результаты.

Давайте погрузиться в! 🎖️

Что такое синхронная система?

В синхронной системе задачи завершаются одна за другой.

Подумайте об этом, как будто у вас есть только одна рука, чтобы выполнить 10 задач. Итак, вы должны выполнить одну задачу одновременно.

Посмотрите на GIF 👇 – одна вещь происходит за один раз:

Вы увидите, что пока первое изображение не будет полностью загружено, второе изображение не запускает нагрузку.

Ну, JavaScript по умолчанию синхронно [Однопоточный] Отказ Подумайте об этом, как это – один нить означает одну руку, с которой нужно делать вещи.

Что такое асинхронная система?

В этой системе задачи завершены независимо.

Здесь представьте, что для 10 задач у вас есть 10 рук. Итак, каждая рука может сделать каждую задачу самостоятельно и одновременно.

Посмотрите на GIF 👇 – вы можете увидеть, что каждое изображение загружается одновременно.

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

Суммируйте синхронные против асинхронных JS:

Когда три изображения на марафоне, в A:

Синхронный Система, три изображения находятся в одной полосе движения. Никто не может обогнать другого. Гонка закончена одна за другим. Если изображение № 2 останавливается, следующее изображение останавливается.

Асинхронная система, Три изображения находятся в разных полосах. Они закончат гонку на своем собственном темпе. Никто не останавливается ни на кого:

Примеры синхронного и асинхронного кода

Перед началом нашего проекта давайте посмотрим на несколько примеров и выясните любые сомнения.

Пример синхронного кода

Чтобы проверить синхронную систему, напишите этот код в JavaScript:

console.log(" I ");

console.log(" eat ");

console.log(" Ice Cream ");

Вот результат в консоли: 👇

Асинхронный код примера

Допустим, это займет две секунды, чтобы съесть немного мороженого. Теперь давайте проверим асинхронную систему. Напишите следующий код в JavaScript.

Примечание: Не волнуйтесь, мы обсудим Setimeout () Функция позже в этой статье.

console.log("I");

// This will be shown after 2 seconds

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")

И вот результат в консоли: And here’s the result in the console: 👇

Теперь, когда вы знаете разницу между синхронными и асинхронизанными операциями, давайте построим нашу магазин мороженого.

Как настроить ваш проект

Для этого проекта вы можете просто открыть Codepen.io и начать кодирование. Или вы можете сделать это в VS-коде или редакторе по вашему выбору.

Откройте раздел JavaScript, а затем откройте консоль разработчиков. Мы напишем наш код и посмотрите результаты в консоли.

Когда вы устанавливаете функцию внутри другой функции в качестве аргумента, это называется обратным вызовом.

Вот иллюстрация обратного вызова:

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

Почему мы используем обратные вызовы?

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

Посмотрите на этот пример: 👇

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

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

Чтобы объяснить, что более подробно, давайте начнем наше мороженое в магазине бизнеса.

Но ждать…

Магазин будет иметь две части:

Кладовка будет иметь все ингредиенты [нашу Backend]
Мы производим мороженое на нашей кухне [Frontend]

Давайте храним наши данные

Теперь мы собираемся хранить наши ингредиенты внутри объекта. Давайте начнем!

Вы можете хранить ингредиенты внутри таких объектов: 👇

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"]
 }

Наши другие ингредиенты здесь: 👇

Вы можете хранить эти другие ингредиенты в таких объектах JavaScript: 👇

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"],
    liquid : ["water", "ice"],
    holder : ["cone", "cup", "stick"],
    toppings : ["chocolate", "peanuts"],
 };

Весь бизнес зависит от того, что клиент заказы Отказ Как только у нас есть заказ, мы начнем производство, а затем мы обслуживаем мороженое. Итак, мы создадим две функции ->

порядок
производство

Вот как все это работает: 👇

Давайте сделаем наши функции. Мы будем использовать функции стрелки здесь:

let order = () =>{};

let production = () =>{};

Теперь давайте установим отношения между этими двумя функциями, используя обратный вызов, как это: Now, let’s establish a relationship between these two functions using a callback, like this: 👇

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

Давайте сделаем небольшой тест

Мы будем использовать console.log () Функция для проведения тестов, чтобы прояснить любые сомнения, которые мы могли бы относиться к тому, как мы установили связь между двумя функциями.

let order = (call_production) =>{

console.log("Order placed. Please call production")

// function 👇 is being called 
  call_production();
};

let production = () =>{

console.log("Production has started")

};

Чтобы запустить тест, мы позвоним Заказать функция. И мы добавим вторую функцию имени Производство как его аргумент.

// name 👇 of our second function
order(production);

Вот результат в нашей консоли 👇

Отдохнуть

Пока так хорошо – сделай перерыв!

Удалить консоль.

Держите этот код и удалите все [Не удаляйте нашу переменную запасы]. На нашей первой функции пройдите еще один аргумент, чтобы мы могли получить заказ [имя фруктов]:

// Function 1

let order = (fruit_name, call_production) =>{

  call_production();
};

// Function 2

let production = () =>{};


// Trigger 👇

order("", production);

Вот наши шаги, и время каждого шага примет, чтобы выполнить.

В этом графике вы можете увидеть, что шаг 1 – разместить заказ, который занимает 2 секунды. Затем шаг 2 режет фрукты (2 секунды), шаг 3 – добавить воду и лед (1 секунду), шаг 4 – запуск машины (1 секунду), шаг 5 – выбрать контейнер (2 секунды), шаг 6 Чтобы выбрать начинки (3 секунды) и шаг 7, последний шаг, предназначен для обслуживания мороженого, которое занимает 2 секунды.

Чтобы установить время, функция сентиментальный () Отлично, как также использует обратный вызов, принимая функцию в качестве аргумента.

Теперь давайте выберем наши фрукты и используем эту функцию:

// 1st Function

let order = (fruit_name, call_production) =>{

  setTimeout(function(){

    console.log(`${stocks.Fruits[fruit_name]} was selected`)

// Order placed. Call production to start
   call_production();
  },2000)
};

// 2nd Function

let production = () =>{
  // blank for now
};

// Trigger 👇
order(0, production);

И вот результат в консоли: And here’s the result in the console: 👇

Примечание что результат отображается через 2 секунды.

Если вам интересно, как мы выбрали клубника из нашей переменной на запаса, вот код с форматом 👇

Не удаляйте ничего. Теперь мы начнем написать нашу производственную функцию со следующим кодом. 👇 Мы будем использовать функции стрелки:

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
  },0000)

};

И вот результат 👇

Мы несмомем еще один Сетримс Функция в наших существующих сентиментальный We'll nest another setTimeout

let production = () =>{
  
  setTimeout(()=>{
    console.log("production has started")


    setTimeout(()=>{
      console.log("The fruit has been chopped")
    },2000)


  },0000)
};

И вот результат 👇

Если вы помните, вот наши шаги:

Давайте завершим наше производство мороженого, вложенное в функцию внутри другой функции – это также известно как обратный вызов, помните?

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
    setTimeout(()=>{
      console.log("The fruit has been chopped")
      setTimeout(()=>{
        console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} Added`)
        setTimeout(()=>{
          console.log("start the machine")
          setTimeout(()=>{
            console.log(`Ice cream placed on ${stocks.holder[1]}`)
            setTimeout(()=>{
              console.log(`${stocks.toppings[0]} as toppings`)
              setTimeout(()=>{
                console.log("serve Ice cream")
              },2000)
            },3000)
          },2000)
        },1000)
      },1000)
    },2000)
  },0000)

};

И вот результат в консоли 👇

Чувствовать неловкость?

Это называется обратный черт ада. Это выглядит что-то подобное (помните этот код чуть выше?): This is called callback hell. It looks something like this (remember that code just above?): 👇

Какое это решение этого?

Обещания были изобретены для решения проблемы обратного вызова ада и лучше справиться с нашими задачами.

Отдохнуть

Но сначала сделайте перерыв!

Вот как выглядит обещание:

Давайте рассекать обещания вместе.

Как показывают вышеприведенные графики, обещание имеет три состояния:

В ожидании: Pending: This is the initial stage. Nothing happens here. Think of it like this, your customer is taking their time giving you an order. But they haven’t ordered anything yet. Это начальный этап. Здесь ничего не происходит. Подумайте об этом, как это, ваш клиент берет время, давая вам заказ. Но они еще ничего не заказывали.
Решено: Это означает, что ваш клиент получил свою еду и счастлив.
Отклонено: Это означает, что ваш клиент не получил свой заказ и покинул ресторан.

Давайте усыновам обещания нашему исследованию производства мороженого производства.

Но ждать…

Нам нужно понять еще четыре вещи ->

Отношения между временем и работой
Обещание цепочки
Обработка ошибок
.finally обработчик

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

Отношения между временем и работой

Если вы помните, это наши шаги и время каждого требуют, чтобы сделать мороженое »

Для этого произойдет, давайте создадим переменную в JavaScript: For this to happen, let’s create a variable in JavaScript: 👇

let is_shop_open = true;

Теперь создайте функцию имени Заказать и пройти два аргумента по имени Время, работа :

let order = ( time, work ) =>{

  }

Теперь мы собираемся обещать нашему клиенту: «Мы будем обслуживать вас мороженым», как это ->

let order = ( time, work ) =>{

  return new Promise( ( resolve, reject )=>{ } )

  }

Наше обещание имеет 2 части:

Разрешено [доставлено мороженым]
Отклонен [клиент не получил мороженое]

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      resolve( )

    }

    else{

      reject( console.log("Our shop is closed") )

    }

  })
}

Давайте добавим время и рабочие факторы внутри нашего обещания, используя Setimeout () функция внутри нашего Если утверждение. Следуй за мной 👇.

Примечание: В реальной жизни вы также можете избежать фактора времени. Это полностью зависит от характера вашей работы.

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      setTimeout(()=>{

       // work is 👇 getting done here
        resolve( work() )

// Setting 👇 time here for 1 work
       }, time)

    }

    else{
      reject( console.log("Our shop is closed") )
    }

  })
}

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

// Set 👇 time here
order( 2000, ()=>console.log(`${stocks.Fruits[0]} was selected`))
//    pass a ☝️ function here to start working

Результат 👇 Через 2 секунды выглядит так:

Молодец!

Обещание цепочки

В этом методе мы определяем то, что нам нужно сделать, когда первая задача завершена с использованием .then обработчик. In this method, we defining what we need to do when the first task is complete using the

Обработчик. Исполнитель возвращает обещание, когда наше оригинальное обещание решено.

Вот пример:

Позвольте мне сделать это проще: оно похоже на давать инструкции кому-то. Вы говорите кому-то «сначала сделать это, то делай это, то это другое, то … тогда .., то …» и так далее.

Первая задача – наше оригинальное обещание.
Остальные задачи возвращают наше обещание, когда одна небольшая работа завершена

Давайте реализуем это в нашем проекте. В нижней части вашего кода запишите следующие строки. Let’s implement this on our project. At the bottom of your code write the following lines. 👇

Примечание: Не забудьте написать возвращение слово внутри Ваш .then обработчик. В противном случае это не будет работать должным образом. Если вам интересно, попробуйте удалить возврат, как только мы закончим шаги:

order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

И вот результат: And here’s the result: 👇

Используя одну и ту же систему, давайте закончим наш проект: Using the same system, let’s finish our project:👇

// step 1
order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

// step 2
.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

// step 3
.then(()=>{
  return order(2000, ()=>console.log("Fruit has been chopped"))
})

// step 4
.then(()=>{
  return order(1000, ()=>console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`))
})

// step 5
.then(()=>{
  return order(1000, ()=>console.log("start the machine"))
})

// step 6
.then(()=>{
  return order(2000, ()=>console.log(`ice cream placed on ${stocks.holder[1]}`))
})

// step 7
.then(()=>{
  return order(3000, ()=>console.log(`${stocks.toppings[0]} as toppings`))
})

// Step 8
.then(()=>{
  return order(2000, ()=>console.log("Serve Ice Cream"))
})

Вот результат: 👇

Обработка ошибок

Нам нужен способ обрабатывать ошибки, когда что-то пойдет не так. Но во-первых, нам нужно понять цикл обещания:

Чтобы поймать наши ошибки, давайте изменим нашу переменную в false.

let is_shop_open = false;

Это означает, что наш магазин закрыт. Мы больше не продаем мороженое нашим клиентам.

Чтобы обработать это, мы используем .catch обработчик. Так же, как .then , это также возвращает обещание, но только когда наше оригинальное обещание отклонено.

Небольшое напоминание здесь:

.then Работает, когда обещание решено
.catch Работает, когда обещание отклонено

Спуститесь до самогона и напишите следующий код: 👇

Просто помните, что между вашим предыдущим .then Обработчик и .catch обработчик.

.catch(()=>{
  console.log("Customer left")
})

Вот результат: 👇

Пара вещей, чтобы отметить по этому вопросу:

1-е сообщение исходит от Отклонить () часть нашего обещания
2-е сообщение исходит от .catch обработчик

Как использовать обработчик .finally ()

Там что-то называется Наконец Обработчик, который работает независимо от того, был ли наша обещание решено или отклонено.

Например: Обслуживаем ли мы нет клиентов или 100 клиентов, наш магазин закроется в конце дня

Если вам интересно проверить это, приходите в самом дне и напишите этот код: 👇

.finally(()=>{
  console.log("end of day")
})

Результат: 👇

Все, пожалуйста, приветствуйте Async/ждать ~

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

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

Но сначала сделайте перерыв

Давайте посмотрим: Let’s have a look:👇

Обещания против Async/ждут в JavaScript

Перед async/ждут, чтобы сделать обещание, что мы написали это:

function order(){
   return new Promise( (resolve, reject) =>{

    // Write code here
   } )
}

Теперь использую Async/ждут, мы пишем подобное:

//👇 the magical keyword
 async function order() {
    // Write code here
 }

Но ждать……

Вы должны понимать ->

Как использовать пытаться How to use the try and catch
keywords и

Как использовать попытку и ловить ключевые слова

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

Давайте посмотрим сравнение. Мы увидим небольшую демонстрацию формата, то мы начнем кодировать.

Обещания в JS -> решить или отклонить

Мы использовали решимость и отклонить в обещаниях, как это:

function kitchen(){

  return new Promise ((resolve, reject)=>{
    if(true){
       resolve("promise is fulfilled")
    }

    else{
        reject("error caught here")
    }
  })
}

kitchen()  // run the code
.then()    // next step
.then()    // next step
.catch()   // error caught here
.finally() // end of the promise [optional]

Async/a ждать в js -> попробуй, поймать

Когда мы используем Async/ждут, мы используем этот формат:

//👇 Magical keyword
async function kitchen(){

   try{
// Let's create a fake problem      
      await abc;
   }

   catch(error){
      console.log("abc does not exist", error)
   }

   finally{
      console.log("Runs code anyways")
   }
}

kitchen()  // run the code

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

Теперь, надеюсь, вы понимаете разницу между обещаниями и Async/ждут.

Как использовать JavaScript await ключевое слово

Ключевое слово . ждать Делает JavaScript ждать, пока обещание не успокоится и не возвращает его результат.

Как использовать ключевое слово await в JavaScript

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

Уведомление здесь, что только наша кухня остановлена, но наш персонал за пределами кухни все равно будет делать такие вещи, как:

мыть посуду
Чистка таблиц
принимать заказы и так далее.

Пример кода ключевых слов await

Давайте создадим небольшое обещание спросить, какой подвину на использование. Процесс занимает три секунды.

function toppings_choice (){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{

      resolve( console.log("which topping would you love?") )

    },3000)
  })
}

Теперь давайте сначала создадим нашу кухню с ключевым словом Async.

async function kitchen(){

  console.log("A")
  console.log("B")
  console.log("C")
  
  await toppings_choice()
  
  console.log("D")
  console.log("E")

}

// Trigger the function

kitchen();

Давайте добавим другие задачи ниже кухня () вызов.

console.log("doing the dishes")
console.log("cleaning the tables")
console.log("taking orders")

И вот результат:

Мы буквально выходим на улицу нашей кухни, чтобы спросить нашего клиента: «Какое у вас выбор по договорной цене?» В то же время другие вещи все еще сделаны.

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

Небольшое примечание

При использовании Async/ждут, вы также можете использовать .then , .catch и .finally обработчики, а также основной частью обещаний.

Давайте снова откроем наш магазин мороженого

Мы создадим две функции ->

Кухня : сделать мороженое
время : Чтобы назначить количество времени, которое займет каждая небольшая задача.

Давайте начнем! Сначала создайте время функции времени:

let is_shop_open = true;

function time(ms) {

   return new Promise( (resolve, reject) => {

      if(is_shop_open){
         setTimeout(resolve,ms);
      }

      else{
         reject(console.log("Shop is closed"))
      }
    });
}

Теперь давайте создадим нашу кухню:

async function kitchen(){
   try{

     // instruction here
   }

   catch(error){
    // error management here
   }
}

// Trigger
kitchen();

Давайте дадим маленькие инструкции и тестируйте, если наша кухня работает или нет:

async function kitchen(){
   try{

// time taken to perform this 1 task
     await time(2000)
     console.log(`${stocks.Fruits[0]} was selected`)
   }

   catch(error){
     console.log("Customer left", error)
   }

   finally{
      console.log("Day ended, shop closed")
    }
}

// Trigger
kitchen();

Результат выглядит так, когда магазин открыт: 👇

Результат выглядит так, когда магазин закрыт: 👇

Все идет нормально.

Давайте завершим наш проект.

Вот список наших задач снова: 👇

Сначала откройте наш магазин

let is_shop_open = true;

Теперь напишите шаги внутри наших кухня () Функция: 👇.

async function kitchen(){
    try{
	await time(2000)
	console.log(`${stocks.Fruits[0]} was selected`)

	await time(0000)
	console.log("production has started")

	await time(2000)
	console.log("fruit has been chopped")

	await time(1000)
	console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`)

	await time(1000)
	console.log("start the machine")

	await time(2000)
	console.log(`ice cream placed on ${stocks.holder[1]}`)

	await time(3000)
	console.log(`${stocks.toppings[0]} as toppings`)

	await time(2000)
	console.log("Serve Ice Cream")
    }

    catch(error){
	 console.log("customer left")
    }
}

И вот результат: And here’s the result: 👇

Поздравляем для чтения до конца! В этой статье вы узнали:

Разница между синхронными и асинхронными системами
Механизмы асинхронного JavaScript с использованием 3 методов (обратных вызовов, обещаний и асинхронизации/ждут))

Вот ваша медаль для чтения до конца. Here’s your medal for reading until the end. ❤️ Here’s your medal for reading until the end. ❤️

Предложения и критика высоко ценятся ❤️

YouTube Джой Шахеб

Linkedin. /Joyshaheb

Твиттер /Joyshaheb

Instagram. /Joyshaheb

Вы можете посмотреть это учебное пособие на YouTube, если вам нравится:

Что такое синхронная система?

Что такое асинхронная система?

Суммируйте синхронные против асинхронных JS:

Примеры синхронного и асинхронного кода

Пример синхронного кода

Асинхронный код примера

Как настроить ваш проект

Почему мы используем обратные вызовы?

Но ждать…

Давайте храним наши данные

Давайте сделаем небольшой тест

Отдохнуть

Удалить консоль.

Отдохнуть

Но ждать…

Отношения между временем и работой

Обещание цепочки

Вот пример:

Обработка ошибок

Как использовать обработчик .finally ()

Но сначала сделайте перерыв

Обещания против Async/ждут в JavaScript

Но ждать……

Как использовать попытку и ловить ключевые слова

Обещания в JS -> решить или отклонить

Async/a ждать в js -> попробуй, поймать

Как использовать JavaScript await ключевое слово

Как использовать ключевое слово await в JavaScript

Пример кода ключевых слов await

Небольшое примечание

Давайте снова откроем наш магазин мороженого

Предложения и критика высоко ценятся ❤️

Читайте ещё по теме: