Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

async / await

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

async / await

Post 30.08.2018, 15:23:26

Czesc,

Spotklem sie niedawno z tym podejsciem do Promisow, jednak nie bardzo je rozumiem. Czy moglbym prosic o jakis prosty przykład z objasnieniem? Nie rozumiem dlaczego przed funkcją. ktore zawiera w sobie await, trzeba dawac async. Ponadto czytalem ze nie zawsze powinno sie tego używać. Chodzi o jak najprostrze, łopatologiczne objaśnienie. Czytalem artykuły na ten temat, jednak nie złapałem dlaczego jest to lepsze czy gorsze od Promisow jakie znamy.

Dzięki!
Pozdrawiam!
whitty
Posty: 110
Dołączył(a): 12.07.2015

Re: async / await

Post 02.09.2018, 16:18:18

Słowo async przy funkcji spełnia 2 role. Pierwsza to zmiana w zachowaniu silnika JS - funkcja w towarzystwie async z automatu zwraca promise, niezależnie od tego co znajduje się w ciele funkcji. Zobacz sobie ten prosty przykład

Kod: Zaznacz cały
function foo () { return 1; }
async function bar () { return 2; }
console.log(foo(), bar());


http://jsfiddle.net/nLobc3fe/

Pierwszy element logów będzie pokazywał wartość 1. Drugi element logów będzie pokazywał Promise (który zostanie rozwiązany do wartości 2). - czyli async powoduje, że dana funkcja z automatu zwróci promise. To, że funkcja zwróci promise oznacza, że de facto staje się funkcą asynchroniczną, ponieważ promisy rozwiązują się w sposób asynchroniczny (na bazie microtasków).

Druga rola, to rola informacyjna dla programisty, że jest to funkcja asynchroniczna, którą należy wywoływać w towarzystwie await.

Jak dla mnie async/await ma sporo zalet, kod staje się prostszy do prześledzenia, błędy zarówno kodu synchronicznego jak i asynchronicznego obsługuje się standardowym try...catch. Wadą jest jednak - w mojej opinii - to, że pewne typy błędów są trudne na pierwszy rzut oka do wyłapania. Drugi problem to pokusa pakowania do jednej funkcji wielu instrukcji, które przy starym podejściu z automatu wymuszają podział kodu na mniejsze fragmenty. Ale wystarczy się troszeczkę pilnować.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19786
Dołączył(a): 14.04.2002

Re: async / await

Post 03.09.2018, 09:07:43

Dzięki Kuku, trochę mi to rozjaśniło. Aczkolwiek jaką funkcję pełni słowo await? Dlaczego async/await musza wystepowac w parach?
whitty
Posty: 110
Dołączył(a): 12.07.2015

Re: async / await

Post 03.09.2018, 12:10:41

await pozwala pracować z kodem asynchronicznym tak jakby był to kod synchroniczny. Polecenie to wstrzymuje wykonanie kolejnych linijek kodu do czasu aż asynchroniczna funkcja się zakończy z wynikiem.

Kod: Zaznacz cały
function foo () {
   return new Promise((resolve) => setTimeout(() => resolve(42), 10000));
}

async function test () {
    console.log(Date.now());
    await foo();
    console.log(Date.now());
}

test();


Uruchom sobie powyższy kod. Powinieneś zobaczyć pierwszego console.log praktycznie od razu a drugiego dopiero po 10 sekundach, bo await linię wyżej nakazuje czekać aż asynchroniczna funkcja foo zakończy swoje działanie po 10-sekundowym setTimeout.

Potem usuń sobie słowo await i uruchom kod ponownie. Obydwa logi zobaczysz natychmiast, ponieważ silnik JS nie będzie już czekał na zakończenie asynchronicznej logiki wewnątrz foo().

Co do tego, że async/await muszą być w parach to po prostu - async informuje silnik javascriptu, że musi obsługiwać zatrzymywanie wykonania kolejnych poleceń za pomocą await do czasu zakończenia asynchronicznego kodu no i to zwracanie Promise przez funkcję oznaczoną async.

Detali związanych z async jest więcej. Warto poczytać specyfikację lub MDN. Szukaj za hasłem AsyncFunction
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19786
Dołączył(a): 14.04.2002

Re: async / await

Post 03.09.2018, 17:57:28

async/wait to to samo co obiecanki. najlepsze jest to, ze mozna uzyc await Promise.all([])
kerios83
Posty: 123
Dołączył(a): 31.10.2008

Re: async / await

Post 06.09.2018, 09:15:11

Dziękuję bardzo! jak zawsze Kuku, fajnie wytłumaczone.
Dzięki rowniez za odpowiedz kerios83.

Pozdrawiam!
whitty
Posty: 110
Dołączył(a): 12.07.2015


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 1 gość

Hosting, Domeny, SSL

Subskrypcja

Mamy 51770 zarejestrowanych użytkowników.
Najnowszy użytkownik: mitchellnews


Nasi użytkownicy napisali:

  • 938050 wiadomości
  • w 247613 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)