Dowiedz się, jak tworzyć programy asynchroniczne za pomocą JavaScript

Programowanie asynchroniczne jest podstawą w tworzeniu oprogramowania. Trudno uwierzyć, że ta koncepcja programowania istnieje dopiero od XXI wieku. Język programowania F# był pierwszym spośród jego rówieśników, który wprowadził programowanie asynchroniczne w 2007 roku.

Inne języki, takie jak C#, Python, JavaScript i C++, stopniowo dodawały obsługę programowania asynchronicznego. Najważniejsze pytanie brzmi: jaką wartość dodaje programowanie asynchroniczne do twoich aplikacji?

Ten artykuł odpowiada na to i inne pytania, dzięki czemu dowiesz się wszystkiego o tym, jak używać programowania asynchronicznego.

Co to jest programowanie synchroniczne?

Programowanie synchroniczne odnosi się do programu w jego najbardziej podstawowej formie. Ten model programowania przetwarza sekwencyjnie wiersze kodu w programie lub skrypcie. Zawsze zaczyna się od pierwszego wiersza kodu w programie. Następnie czeka, aż każdy wiersz kodu zakończy swoje działanie, zanim przejdzie do następnego.

Model synchroniczny zawiera również kod warunkowy, taki jak

Jeśli oraz dopóki sprawozdania. Chociaż tylko część kodu w instrukcji warunkowej zostanie wykonana, program nadal będzie działał sekwencyjnie.

Przykład programu synchronicznego

const SyncCode = () => {
 console.log("To jest pierwsza linia w programie")
 console.log("To jest druga linia w programie")
 console.log("To jest ostatnia linia w programie")
}
KodSync();

Uruchomienie powyższego programu JavaScript spowoduje wyświetlenie w konsoli następujących danych wyjściowych:

To jest pierwsza linia w programie
To jest druga linia w programie
To jest ostatnia linijka w programie

Powyższe dane wyjściowe są dokładnie tym, czego powinieneś się spodziewać. Program zaczyna się od góry i czeka na zakończenie jednej linii kodu przed przejściem do następnej.

Co to jest programowanie asynchroniczne?

Programowanie asynchroniczne jest przeciwieństwem programowania synchronicznego. Asynchroniczny model programowania przetwarza jednocześnie kilka wierszy kodu. Nie czeka, aż poprzedni wiersz kodu w programie zakończy swoje działanie, zanim przejdzie do następnego.

Związane z: Synchroniczne vs. Programowanie asynchroniczne: czym się różnią?

Programowanie asynchroniczne może skrócić czas wykonywania o połowę, skutecznie tworząc szybsze komputery.

Przykład programu asynchronicznego

const kod asynchroniczny = () => {
 console.log("To jest pierwsza linia w programie")
 setTimeout(() => {
 console.log("To jest druga linia w programie")
 }, 3000)
 console.log("To jest ostatnia linia w programie")
}
Kod Asynchroniczny();

Wykonanie powyższego kodu JavaScript spowoduje wyświetlenie w konsoli następujących danych wyjściowych:

To jest pierwsza linia w programie
To jest ostatnia linijka w programie
To jest druga linia w programie

Jeśli porównasz powyższe dane wyjściowe konsoli z programem asynchronicznym, który je generuje, zobaczysz, że istnieje oczywista rozbieżność. Wezwanie do… Dziennik z napisem „To jest druga linia w programie” występuje przed napisem „To jest ostatnia linia w programie”. Jednak dane wyjściowe konsoli tego nie odzwierciedlają.

Biorąc pod uwagę, że JavaScript jest głównie synchroniczny, kod w powyższym programie wykonywał się sekwencyjnie. Ale JavaScript obsługuje programowanie asynchroniczne za pomocą funkcji takich jak setTimeout() metoda.

ten setTimeout() metoda jest asynchroniczną metodą JavaScript, która przyjmuje dwa argumenty: funkcję i opóźnienie. Opóźnienie to licznik czasu (w milisekundach), który opóźnia wykonanie funkcji. Tak więc, podczas gdy powyższy program czeka przez trzy sekundy na wykonanie funkcji w setTimeout() metody, przechodzi do następnego wiersza w kodzie. Powoduje to wykonanie trzeciego wywołania funkcji przed drugim.

Asynchroniczne technologie JavaScript

Oprócz setTimeout() Wspomniana powyżej metoda, kilka technologii JavaScript wykorzystuje programowanie asynchroniczne. Technologie te wykorzystują asynchroniczny model programowania do tworzenia szybszych aplikacji nieblokujących. Niektóre z tych technologii obejmują:

• jQuery Ajax
• Aksjos
• NodeJS

Związane z: Co to jest Node.js? Oto jak korzystać z JavaScript po stronie serwera

Tworzenie programów asynchronicznych za pomocą JavaScript

Istnieje kilka sposobów obsługi kodu asynchronicznego. Wybrana metoda powinna zależeć od typu aplikacji, którą chcesz opracować. Te metody obejmują funkcje wywołania zwrotnego, obietnice i async/await.

Funkcje zwrotne

Istnieją dwie ważne właściwości funkcji zwrotnej. Służą one jako parametry dla innych funkcji i polegają na zdarzeniach zewnętrznych, aby wykonać swoje zadanie. ten setTimeout() Metoda użyta w powyższym przykładzie asynchronicznym jest funkcją wywołania zwrotnego. Program przekazuje jej funkcję dziennika jako parametr (funkcja wywołania zwrotnego) i wykonuje ją dopiero po trzech sekundach (zdarzenie).

Funkcje wywołań zwrotnych świetnie sprawdzają się w małych programach, ale wraz z rozwojem aplikacji mogą one bardzo szybko stać się zbyt skomplikowane. Dzieje się tak, ponieważ funkcje zwrotne często wywołują inne funkcje zwrotne, tworząc łańcuch zagnieżdżonych wywołań zwrotnych.

Korzystanie z obietnic

JavaScript dodał obsługę obietnic po funkcjach zwrotnych. Stanowią dobrą alternatywę przy tworzeniu większych aplikacji. Obietnica przedstawia, co może się stać po operacji asynchronicznej. Ten potencjalny wynik przyjmie jedną z dwóch form: rozwiązany lub odrzucony. Oddzielna funkcja obsługuje każdy z tych wyników, eliminując potrzebę zagnieżdżania (problem funkcji zwrotnej). Zamiast tego obietnice zachęcają do łatwiejszych w użyciu funkcji łańcuchowych.

Każda obietnica zaczyna się od nowego Obietnica obiekt pełniący funkcję anonimową z rozstrzygać oraz odrzucić parametry. W ramach tej funkcji będziesz mieć aplikację asynchroniczną, która zwraca rozwiązanie, jeśli operacja asynchroniczna się powiedzie, lub odrzucenie w przeciwnym razie.

ten następnie() funkcja łańcucha obsługuje rozstrzygać funkcja, a złapać() funkcja łańcucha obsługuje odrzucić funkcjonować. Nie ma więc potrzeby stosowania zagnieżdżonych instrukcji if, jak to ma miejsce w przypadku funkcji zwrotnych.

Korzystanie z przykładu obietnic

const Funkcja Obietnicy = () =>{
 return new Promise((resolve, reverse) => {
 setTimeout(() => {
 resolve("ta operacja asynchroniczna wykonana dobrze")
 }, 3000)
 })
}
PromiseFunction().then((wynik) => {
 console.log("Sukces", wynik)
}).catch((błąd) => {
 console.log("Błąd", błąd)
})

Powyższy kod zwraca w konsoli następujące dane wyjściowe:

Powodzenie tej operacji asynchronicznej wykonanej dobrze

Dzieje się tak, ponieważ obietnica zwraca rozstrzygać funkcji, która przekazuje swoje wyniki do następnie() funkcjonować. Jeśli obietnica zwróci odrzucić funkcja program wykorzystuje złapać funkcja zamiast.

Korzystanie z funkcji asynchronicznej/oczekiwania

Jeśli nie chcesz tworzyć łańcucha obietnic podczas operacji asynchronicznych, możesz spróbować async/await. Async/await nie jest zupełnie innym narzędziem asynchronicznym niż obietnice, po prostu innym sposobem ich obsługi. Obsługuje obietnice bez użycia metody łańcuchowej. Tak więc, w podobny sposób, w jaki obietnice obsługują operacje asynchroniczne lepiej niż funkcje wywołań zwrotnych, async/await ma przewagę nad zwykłymi obietnicami.

Każda funkcja async/await ma dwa kluczowe atrybuty. Zaczynają się od asynchroniczny słowo kluczowe, a czekać na słowo kluczowe czeka na wynik operacji asynchronicznej.

Przykład programu asynchronicznego/oczekiwania

const Funkcja Obietnicy = () =>{
 return new Promise((resolve, reverse) => {
 setTimeout(() => {
 resolve("ta operacja asynchroniczna wykonana dobrze")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const wynik = czekaj PromiseFunction();
 console.log (wynik);
}
AsyncAwaitFunc();

Powyższy kod zwróci w konsoli następujące dane wyjściowe:

ta operacja asynchroniczna wykonała się dobrze

Jakie są główne dania na wynos?

Jest kilka głównych punktów, które powinieneś wziąć z tego artykułu:

• Programowanie asynchroniczne jest cenne, ponieważ skraca czas oczekiwania programu, tworząc szybsze aplikacje.
• Funkcja wywołania zwrotnego może być synchroniczna lub asynchroniczna.
• Obietnice oferują lepszy sposób obsługi operacji asynchronicznych niż funkcje wywołania zwrotnego.
• Funkcje Async/await obsługują obietnice w lepszy sposób niż używanie funkcji łańcuchowych.
• Funkcja async/await obsługuje operacje asynchroniczne w sposób, który wygląda synchronicznie, co ułatwia zrozumienie.
• Funkcje strzałek pomagają pisać lepszy kod.

Funkcje strzałek JavaScript mogą uczynić Cię lepszym programistą

Chcesz być lepszy w tworzeniu stron internetowych? Funkcje strzałek dodane do JavaScript ES6 dają dwa sposoby tworzenia funkcji dla aplikacji internetowych.

Czytaj dalej

O autorze