От обратни повиквания до 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, която връща Promise, което ви позволява да свързвате верижни извиквания на метод

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

Ако върне Promise (както в ред A), уреждането на това Promise се препраща към P. Ето защо обратното извикване от ред B може да вземе уреждането на Promise на 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  
  });

Async/Изчакване?

специален синтаксис за работа с обещания по по-удобен начин „захарен синтаксис“ ви позволява да пишете асинхронен 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

Подобни въпроси