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

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

we want to make a cup of tea, the activities are :
a. Boiling water
b. Put tea on a glass 
c. Put some sugar on a glass
d. Pouring hot water on a glass
e. Mix the water in the glass with a spoon

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

In javascript we can achieve asynchronous with many ways:
a. Asynchronous with callback
b. Asynchronous with promise
c. Asynchronous with async / await

А. Асинхронно с обратным вызовом

setTimeout(function() { myFunction("test callback async !!!"); }, 3000);
function myFunction(value) {
 console.log(value)
}

Основываясь на приведенном выше коде, мы используем myFunction в качестве обратного вызова, поэтому текст «test callback async !!!» будет напечатано в журнале консоли через 3000 мс. Обычно для вызова REST API используется функция обратного вызова, поэтому данные ответа будут представлены на экране, когда ответ API будет успешно получен клиентом. Пример :

function callDummyAPI(myCallback) {
   fetch("https://catfact.ninja/breeds")
       .then(response => response.json())
       .then(json => printData(json))
       .catch(error => {
           // handle the error
           console.log(error)
       });
}
function printData(value) {
      console.log(value);
}
 
callDummyAPI(printData)

Объяснение приведенного выше кода заключается в том, что мы используем printData в качестве функции обратного вызова и передаем printData в качестве аргумента метода callDummyAPI. Метод printData будет выполнен после того, как ответ API будет полностью получен клиентом (код javascript).

Б. Асинхронно с обещанием

Promise в javascript сложно освоить. Promise — это оболочка для асинхронных процессов, и обещание более продвинутое, чем асинхронное с обратными вызовами.

There are 3 states of promise.
While a Promise object is “pending” (working), the result is undefined.
When a Promise object is “fulfilled / resolved”, the result is a value.
When a Promise object is “rejected”, the result is an error object.

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

Выполненное/решенное обещание

const myPromise = new Promise((resolve, reject) => {
   setTimeout(() => {
     resolve('hi promise thread');
   }, 3000);
 });
 
 myPromise.then(
   function(value) {console.log(value);}
 ).catch(error => {
   console.log('Request failed', error);
 });
  console.log("main thread");

Если обещание находится в разрешенном состоянии, будет выполнено .then(function(value) {console.log(value);}

Отклоненное обещание

const myPromise = new Promise((resolve, reject) => {
   setTimeout(() => {
     reject('hi promise thread');
   }, 3000);
 });
 
 myPromise.then(
   function(value) {console.log(value);}
 ).catch(error => {
   console.log('Request failed', error);
 });
  console.log("main thread");

Если обещание находится в состоянии отклонения, будет выполнен код .catch(..

С. Асинхронный с Async/Await

Ключевое слово Await будет ждать, пока не будет возвращено значение обещания (разрешено/отклонено). И только ожидание может использоваться внутри ключевого слова Async. Async/Await — это всего лишь оболочка обещания облегчить программистам выполнение асинхронного кода.

const myPromise = () => {
   return new Promise(resolve => {
     setTimeout(() => resolve('hi promise'), 3000)
   })
 };
  const callMypromise = async () => {
   const something = await myPromise()
   return something + ' , i am calling you'
 };
  
 callMypromise().then(res => {
   console.log(res)
 }).catch(error => {
   console.log('Request failed', error);
 });
 
 console.log("main thread");

Основываясь на приведенном выше коде, мы видим цепочку асинхронного выполнения (promise). Основной поток console.log(«основной поток») выполняется первым в ожидании промиса. В первом состоянии обещание находится в состоянии ожидания, и через 3000 мс обещание разрешается, а затем представляет «привет, обещание ..» в браузере.

async function myFunction(){
    try{
        ddddd("go");
    }catch(err){
        console.log(err);
    }
    bbb("go");
 return "I love You !!";
}

async function myDisplay() {
  console.log("hi")
  await myFunction().then(
  function(value) {  console.log(value) },
  function(error) { /* code if some error */ }
 );
    
    console.log("hi1")
}

myDisplay();

Источник :

https://www.freecodecamp.org/news/what-is-promise-in-javascript-for-beginners/

https://www.w3schools.com/js/js_promise.asp

https://nodejs.dev/learn/modern-asynchronous-javascript-with-async-and-await

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

Вопросы по теме