Async i Await w JavaScript to potężne słowa kluczowe używane do obsługi operacji asynchronicznych z obietnicami. Funkcje asynchroniczne domyślnie zwracają obietnice, natomiast funkcja Await wstrzymuje wykonywanie do czasu rozwiązania obietnicy. Upraszcza to kod asynchroniczny i zwiększa czytelność, sprawiając wrażenie synchronicznego.
Funkcja asynchroniczna
Theasync>Funkcja pozwala nam pisać kod oparty na obietnicach tak, jakby był synchroniczny. Dzięki temu wątek wykonawczy nie zostanie zablokowany.
- Obsługa obietnic : Funkcje asynchroniczne zawsze zwracają obietnicę. Jeśli zwrócona zostanie wartość, która nie jest obietnicą, JavaScript automatycznie otacza ją rozwiązaną obietnicą.
Składnia asynchroniczna
async function myFunction() { return 'Hello'; }>Przykład: Tutaj zobaczymy podstawowe zastosowanie asynchronizacji w JavaScript.
JavaScript
const getData = async () =>{ niech dane = 'Hello World'; zwrócić dane; } getData().then(data => console.log(data));> Wyjście
Hello World>
Poczekaj na słowo kluczowe
Theawait>Słowo kluczowe służy do oczekiwania na rozwiązanie obietnicy. Można go używać tylko w bloku asynchronicznym.
- Przerwa w wykonaniu : Await powoduje, że kod czeka, aż obietnica zwróci wynik, co pozwala na czystszy i łatwiejszy w zarządzaniu kod asynchroniczny.
Składnia
let value = await promise;>
Przykład : Ten przykład pokazuje podstawowe użycie słowa kluczowego Wait w JavaScript.
JavaScript const getData = async () =>{ niech y = czekaj 'Hello World'; konsola.log(y); } konsola.log(1); otrzymać dane(); konsola.log(2);> Wyjście
1 2 Hello World>
The asynchroniczny słowo kluczowe przekształca zwykłą funkcję JavaScript w funkcję asynchroniczną, powodując zwrócenie Obietnicy.
The czekać na Słowo kluczowe jest używane wewnątrz funkcji asynchronicznej w celu wstrzymania jej wykonywania i zaczekania na rozwiązanie Obietnicy przed kontynuowaniem.
Przykład asynchronizacji/oczekiwania
Tutaj będziemy implementować kilka obietnic w metodzie, a następnie tej metody użyjemy do wyświetlenia naszego wyniku. Możesz sprawdzić plik JS składnia async/await w przykładzie.
JavaScript function asynchronous_operational_method() { let first_promise = new Promise((resolve, reject) =>rozwiązać('Witam')); niech second_promise = new Promise((rozwiąż, odrzuć) => { setTimeout(() => { rozwiązać(' techcodeview.com..'); }, 1000); }); niech Combined_promise = Promise.all([pierwsza_promise, druga_promise]); zwróć połączoną_obietnicę; } funkcja asynchroniczna display() { niech dane = oczekuj asynchronous_operative_method(); konsola.log(dane); } wyświetlacz();> Wyjście:
[ 'Hello', ' techcodeview.com..' ]>
Wyjaśnienie:
- Stworzenie Obietnicy :
- Tworzone są dwie obietnice: jedna rozwiązuje się natychmiast w przypadku Hello, a druga po 1 sekundzie w przypadku techcodeview.com...
- Łączenie obietnic :
- Metoda Promise.all() łączy obie obietnice w jedną obietnicę Combined_promise.
- Funkcja asynchroniczna :
- Funkcja display() jest zadeklarowana jako asynchroniczna, co wskazuje, że zawiera operacje asynchroniczne.
- Oczekiwanie na rozwiązanie obietnicy :
- Słowo kluczowe Wait wstrzymuje wykonywanie do czasu rozwiązania Combine_promise.
- Wynik logowania :
- Rozwiązana tablica z Combined_promise jest rejestrowana w konsoli.
Notatka
Do rozstrzygać I odrzucić są predefiniowanymi argumentami w JavaScript.
- Funkcja rozwiązywania jest używana po zakończeniu zadania asynchronicznego i zwraca wynik.
- Funkcja odrzucania jest używana w przypadku niepowodzenia zadania asynchronicznego i zwraca przyczyny niepowodzenia.
Zalety Async i Await
- Poprawiona czytelność : Async i Await umożliwiają pisanie kodu asynchronicznego w stylu synchronicznym, co ułatwia jego czytanie i zrozumienie.
- Obsługa błędów : Użycie bloków try/catch z async/await sprawia, że obsługa błędów jest prosta.
- Unika piekła wywołań zwrotnych : Async i Await pomagają unikać zagnieżdżonych wywołań zwrotnych i złożonych łańcuchów obietnic.
- Lepsze debugowanie : Debugowanie kodu asynchronicznego/oczekiwania jest bardziej intuicyjne, ponieważ zachowuje się jak kod synchroniczny.
Wniosek
Async i Await w JavaScript zrewolucjonizowały programowanie asynchroniczne, czyniąc kod bardziej czytelnym i łatwiejszym w utrzymaniu. Umożliwiając pisanie kodu asynchronicznego w stylu synchronicznym, zmniejszają złożoność związaną z wywołaniami zwrotnymi i łączeniem obietnic. Zrozumienie i efektywne wykorzystanie async i oczekiwanie może znacząco poszerzyć Twoje umiejętności programowania w JavaScript, ułatwiając obsługę operacji asynchronicznych w Twoich projektach.
Obsługiwane przeglądarki:
Przeglądarki obsługiwane przez JS Funkcja asynchronizacji/oczekiwania są wymienione poniżej:
numerowany alfabet
- Google Chrome 55 i nowsze
- Firefox 52 i nowsze
- Apple Safari 10.1 i nowsze
- Opera 42 i nowsze
- Edge 14 i nowsze