От обратных вызовов к Promise к Async/Await

Если вы являетесь разработчиком javascript, скорее всего, у вас был некоторый опыт написания обратных вызовов.

По сути, обратные вызовы — это просто функция, которая будет выполняться после завершения выполнения некоторой функции || Разработчики сообщают движку JS, что вы вызываете функцию при выполнении функции (поэтому обратные вызовы называются обратными вызовами).

Слишком часто вы, вероятно, использовали обратные вызовы сами, не зная, что они называются обратными вызовами, поскольку JavaScript — это язык, управляемый событиями. Это означает, что вместо того, чтобы ждать ответа, прежде чем двигаться дальше, JavaScript будет продолжать выполняться, ожидая других событий.

Самый простой код для демонстрации обратных вызовов - это 2 примера

<!DOCTYPE html> 
<html>
    <body>
       <p id="clickme" onclick="clicked()"> Click me I\'m sexy </p>          <script>
 / JS Code here
 function clicked() {              document.getElementById("clickme").innerHTML = "YOU CLICKED ME!";          }
</script>
 </body>
</html>

2. NodeJS

const fs = require("fs");
fs.readFile("file.js", (err, data) => {
  if (err) return console.error(err);
  console.log(data.toString());
});

Видите, насколько он функционален? В чем проблема?

ПЕРЕЗВОНИТЕ АД

Ад обратных вызовов — это место, где есть несколько вложенных обратных вызовов. Нравится:

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

Кроме того, отсутствует «обработка исключений», так как способ написания методов «try-catch» не работает, так как try-catch работает только для вызовов функций, а не для обратных вызовов. Отладка становится болью.

Итак, Promise появился в ECMAScript 5, также известном как ES5. Promise решает почти все проблемы с обратными вызовами за счет:

это способность писать более чистый и читаемый код.

путем вложения ключевого слова then, которое возвращает обещание, которое позволяет вам связывать вызовы методов

asyncFunc1()
.then(result1 => {
    // Use result1
    return asyncFunction2(); // (A)
})
.then(result2 => { // (B)
    // Use result2
})

Если он возвращает промис (как в строке A), расчет этого промиса перенаправляется на P. Вот почему обратный вызов из строки B может получить расчет промиса asyncFunction2.
Если он возвращает другое значение, это значение используется для расчета P.

2. обработка исключений очень удобным способом.

просто используя .catch, вы можете обрабатывать все ошибки на всех ваших then S

asyncFunc1()
.then(result1 => {
    // Use result1
    return asyncFunction2(); // (A)
})
.then(result2 => { // (B)
    // Use result2
})
.catch(error => {
    // Handle errors of asyncFunc1() and asyncFunc2()
});

Недостатки:

Для меня я использую промисы много, это много, но другие видят, что это не решает проблему ада обратных вызовов, это просто серия вложенных блоков «.then», и я вижу, что Promise.all () решает эту проблему, его ввод представляет собой массив промисов , он выводит одно обещание, которое выполняется с массивом результатов.

Promise.all([     asyncFunc1(),     asyncFunc2(), ]) .then(([result1, result2]) => {     ··· }) 
.catch(err => {  
//Receives first rejection among the Promises  
  });

Асинхронно/ожидание?

специальный синтаксис для более удобной работы с промисами «синтаксический сахар» позволяет вам писать асинхронный JavaScript, который выглядит синхронно.

давайте начнем с Async, вы должны написать его перед функцией, и это выглядит так:

async function f1() {
 return 1;
// JavaScript automatically wraps it into a resolved promise with that value.
}

Слово async перед функцией означает одну простую вещь: функция всегда возвращает обещание.

Так что же такое ожидание?

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

async function f2() {
  let promise = new Promise((resolve,reject) => {
    setTimeout(() => resolve("Resolved"), 1000); //generating latency
  });
  var result = await promise;
  return result;
}
f2().then(alert); // alert "Resolved"

Ключевое слово await заставляет JavaScript ждать, пока это промис не установится, и возвращает свой результат.

Удачного кодирования!

От обратных вызовов к Promise к Async/Await

Похожие вопросы