Jaka jest różnica między obietnicami JavaScript a oczekiwaniem asynchronicznym?

Używałem już funkcji ECMAScript 6 i ECMAScript 7 (dzięki Babel) w moich aplikacjach - zarówno mobilnych, jak i internetowych.

Pierwszym krokiem było oczywiście przejście na poziomy ECMAScript 6. Nauczyłem się wielu wzorców asynchronicznych, obietnic (które są naprawdę obiecujące), generatorów (nie wiem, dlaczego symbol *) itd. Z tego obietnice całkiem dobrze pasowały do ​​mojego celu. Używam ich dość często w moich aplikacjach.

Oto przykład / pseudokod pokazujący, jak zaimplementowałem podstawową obietnicę-

var myPromise = new Promise(
    function (resolve,reject) {
      var x = MyDataStore(myObj);
      resolve(x);
    });

myPromise.then(
  function (x) {
    init(x);
});

W miarę upływu czasu, natknąłem ECMAScript 7 możliwości, a jedną z nich jest ASYNCi AWAITsłowa kluczowe / funkcje. Te w połączeniu czynią wielkie cuda. Zacząłem zastępować niektóre obietnice async & await. Wydaje się, że dodają wielką wartość do stylu programowania.

Ponownie, oto pseudokod pokazujący, jak wygląda moja funkcja async, await-

async function myAsyncFunction (myObj) {
    var x = new MyDataStore(myObj);
    return await x.init();
}
var returnVal = await myAsyncFunction(obj);

Pomijając błędy składniowe (jeśli występują), obaj robią dokładnie to samo, co ja czuję. Prawie udało mi się zastąpić większość moich obietnic asynchronicznym, czeka.

Dlaczego asynchroniczne oczekiwanie jest potrzebne, gdy obietnice mają podobną pracę?

Czy async, w oczekiwaniu na rozwiązanie większego problemu? A może było to po prostu inne rozwiązanie do piekła zwrotnego?

Jak powiedziałem wcześniej, jestem w stanie korzystać z obietnic i asynchronii, czekam na rozwiązanie tego samego problemu. Czy jest coś konkretnego, co czeka na rozwiązanie async?

Dodatkowe uwagi:

W moich projektach React i modułach Node.js intensywnie korzystałem z asynchronii, oczekiwań i obietnic. Szczególnie React byli wczesnym ptaszkiem i przyjęli wiele funkcji ECMAScript 6 i ECMAScript 7.

Dlaczego potrzebna jest asynchronizacja i oczekiwanie, skoro Promises wykonuje podobną pracę? Czy async, w oczekiwaniu na rozwiązanie większego problemu?

async/awaitpo prostu zapewnia synchroniczne wrażenie kodu asynchronicznego. To bardzo elegancka forma cukru syntaktycznego.

W przypadku prostych zapytań i manipulacji danymi Obietnice mogą być proste, ale jeśli napotkasz scenariusze, w których występuje złożona manipulacja danymi i nie jest to związane, łatwiej jest zrozumieć, co się dzieje, jeśli kod po prostu wygląda tak, jakby był synchroniczny (innymi słowy, składnia sama w sobie jest formą „przypadkowej złożoności”, którą async/awaitmożna obejść).

Jeśli chcesz wiedzieć, możesz użyć biblioteki takiej jak co(obok generatorów), aby uzyskać ten sam rodzaj wrażenia. Takie rzeczy zostały opracowane, aby rozwiązać problem, który async/awaitostatecznie rozwiązuje (natywnie).

Async / Await zapewnia znacznie ładniejszą składnię w bardziej złożonych scenariuszach. W szczególności wszystko, co dotyczy pętli lub pewnych innych konstrukcji, takich jak try/ catch.

Na przykład:

while (!value) {
  const intermediate = await operation1();
  value = await operation2(intermediate);
}

Ten przykład byłby znacznie bardziej zawiły przy użyciu obietnic.

Dlaczego potrzebna jest asynchronizacja i oczekiwanie, skoro Promises wykonuje podobną pracę? Czy async, w oczekiwaniu na rozwiązanie większego problemu? czy to było po prostu inne rozwiązanie do piekła zwrotnego? Jak powiedziałem wcześniej, mogę używać Promises i Async, Oczekuj, aby rozwiązać ten sam problem. Czy jest coś konkretnego, co rozwiązało Async Await?

Pierwszą rzeczą, którą musisz zrozumieć, że async/ awaitsyntax to tylko cukier syntaktyczny, który ma na celu zwiększenie obietnic. W rzeczywistości zwracana wartość asyncfunkcji jest obietnicą. async/ awaitsyntax daje nam możliwość pisania asynchronicznego w sposób synchroniczny. Oto przykład:

Łańcuch obietnicy:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

Async funkcjonować:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

W powyższym przykładzie awaitczeka na fetch(url)rozwiązanie lub odrzucenie obietnicy ( ). Jeśli obietnica zostanie rozwiązana, wartość jest przechowywana w responsezmiennej, a jeśli obietnica zostanie odrzucona, zgłosi błąd i w ten sposób wejdzie do catchbloku.

Już teraz widzimy, że użycie async/ awaitmoże być bardziej czytelne niż łączenie obietnic. Jest to szczególnie prawdziwe, gdy rośnie liczba obietnic, z których korzystamy. Zarówno łączenie obietnicy, jak i async/ awaitrozwiązanie problemu piekła zwrotnego, a wybór metody zależy od osobistych preferencji.

Pełne porównanie z zaletami i wadami.

Zwykły JavaScript

• Plusy

• Nie wymaga żadnych dodatkowych bibliotek ani technologii
• Zapewnia najlepszą wydajność
• Zapewnia najlepszy poziom zgodności z bibliotekami innych firm
• Umożliwia tworzenie algorytmów ad hoc i bardziej zaawansowanych

• Cons

• Może wymagać dodatkowego kodu i stosunkowo złożonych algorytmów

Async (biblioteka)

• Plusy

• Upraszcza najpopularniejsze wzorce przepływu sterowania
• Nadal jest rozwiązaniem opartym na oddzwanianiu
• Dobry występ

• Cons

• Wprowadza zależność zewnętrzną
• Może nadal nie wystarczyć dla zaawansowanych przepływów

Obietnice

• Plusy

• Znacznie upraszcza najbardziej powszechne wzorce przepływu sterowania
• Solidna obsługa błędów
• Część specyfikacji ES2015
• Gwarantuje odroczone wywołanie onFulfilled i onRejected

• Cons

• Wymaga interfejsów API promisify opartych na wywołaniach zwrotnych
• Wprowadza mały hit wydajnościowy

Generatory

• Plusy

• Sprawia, że ​​nieblokujący interfejs API wygląda jak blokujący
• Upraszcza obsługę błędów
• Część specyfikacji ES2015

• Cons

• Wymaga uzupełniającej biblioteki przepływu sterowania
• Nadal wymaga wywołań zwrotnych lub obietnic implementacji przepływów niesekwencyjnych
• Wymaga thunkify lub obiecuje interfejsy API nie oparte na generatorze

Async czekaj

• Plusy

• Sprawia, że ​​nieblokujący interfejs API wygląda jak blokujący
• Czysta i intuicyjna składnia

• Cons

• Wymaga Babel lub innych transpilerów i pewnej konfiguracji do użycia dzisiaj

Async / await może pomóc w uczynieniu kodu czystszym i bardziej czytelnym w przypadkach, gdy potrzebujesz skomplikowanego przepływu sterowania. Tworzy również kod bardziej przyjazny dla debugowania. I umożliwia obsługę błędów synchronicznych i asynchronicznych za pomocą just try/catch.

Niedawno napisałem ten post przedstawiający zalety async / await nad obietnicami w niektórych typowych przypadkach użycia z przykładami kodu: 6 powodów, dla których JavaScript Async / Await Blows Promises Away (Tutorial)