W tym samouczku dowiesz się o słowach kluczowych async / await w JavaScript na podstawie przykładów.
Użyj asyncsłowa kluczowego z funkcją, aby wskazać, że funkcja jest funkcją asynchroniczną. Funkcja async zwraca obietnicę.
Składnia asyncfunkcji to:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Tutaj,
- name - nazwa funkcji
- parametry - parametry przekazywane do funkcji
Przykład: funkcja asynchroniczna
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Wynik
Funkcja asynchroniczna.
W powyższym programie asyncsłowo kluczowe jest używane przed funkcją, aby wskazać, że funkcja jest asynchroniczna.
Ponieważ ta funkcja zwraca obietnicę, możesz użyć metody łączenia w następujący sposób then():
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Wynik
Funkcja asynchroniczna 1
W powyższym programie f()funkcja jest rozwiązywana i then()metoda zostaje wykonana.
JavaScript czeka na słowo kluczowe
Słowo awaitkluczowe jest używane wewnątrz asyncfunkcji w celu oczekiwania na operację asynchroniczną.
Składnia do użycia await to:
let result = await promise;
Użycie opcji awaitwstrzymuje funkcję asynchroniczną, dopóki obietnica nie zwróci wartości wyniku (rozwiązania lub odrzucenia). Na przykład,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( // wait until the promise resolves let result = await promise; console.log(result); console.log('hello'); ) // calling the async function asyncFunc();
Wynik
Obietnica rozwiązana cześć
W powyższym programie Promisetworzony jest obiekt, który zostaje rozwiązany po 4000 milisekund. Tutaj asyncFunc()funkcja jest zapisywana przy użyciu asyncfunkcji.
Te awaitoczekiwania kluczowych dla obietnicy być kompletne (postanowienie lub odrzucić).
let result = await promise;
W związku z tym hello jest wyświetlane tylko wtedy, gdy wartość obietnicy jest dostępna dla zmiennej wynikowej.
W powyższym programie, jeśli awaitnie jest używany, hello jest wyświetlane przed rozwiązaniem Promise.
Działanie funkcji async / await
Uwaga : można używać awaittylko wewnątrz funkcji asynchronicznych.
Funkcja async umożliwia wykonanie metody asynchronicznej w pozornie synchroniczny sposób. Chociaż operacja jest asynchroniczna, wydaje się, że jest wykonywana w sposób synchroniczny.
Może to być przydatne, jeśli w programie jest wiele obietnic. Na przykład,
let promise1; let promise2; let promise3; async function asyncFunc() ( let result1 = await promise1; let result2 = await promise2; let result3 = await promise3; console.log(result1); console.log(result1); console.log(result1); )
W powyższym programie awaitczeka na wypełnienie każdej obietnicy.
Obsługa błędów
Korzystając z asyncfunkcji, piszesz kod w sposób synchroniczny. Możesz także użyć tej catch()metody, aby złapać błąd. Na przykład,
asyncFunc().catch( // catch error and do something )
Innym sposobem na obsłużenie błędu jest użycie try/catchbloku. Na przykład,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( try ( // wait until the promise resolves let result = await promise; console.log(result); ) catch(error) ( console.log(error); ) ) // calling the async function asyncFunc(); // Promise resolved
W powyższym programie użyliśmy try/catchbloku do obsługi błędów. Jeśli program zostanie uruchomiony pomyślnie, przejdzie do trybloku. A jeśli program wyrzuci błąd, przejdzie do catchbloku.
Aby dowiedzieć się więcej o try/catchszczegółach, odwiedź JavaScript JavaScript try / catch.
Korzyści z używania funkcji asynchronicznej
- Kod jest bardziej czytelny niż użycie wywołania zwrotnego lub obietnicy.
- Obsługa błędów jest prostsza.
- Debugowanie jest łatwiejsze.
Uwaga : te dwa słowa kluczowe async/awaitzostały wprowadzone w nowszej wersji JavaScript (ES8). Niektóre starsze przeglądarki mogą nie obsługiwać async / await. Aby dowiedzieć się więcej, odwiedź stronę Obsługa przeglądarki JavaScript async / await.
