Pierwsze kroki z obietnicami JavaScript

Kod asynchroniczny jest przydatny do wykonywania zadań, które są czasochłonne ale oczywiście tak nie pozbawiony wad. Używa kodu asynchronicznego funkcje zwrotne aby przetworzyć jego wyniki, ale funkcje wywołania zwrotnego nie może zwrócić wartości że typowe funkcje JavaScript mogą.

W ten sposób nie tylko odbierają nam zdolność do kontrolowania wykonanie funkcji ale także spraw obsługa błędów trochę kłopotów. To gdzie Obietnica obiekt przychodzi, ponieważ ma na celu wypełnienie niektórych dziury w kodowaniu asynchronicznym.

Obietnica jest technicznie a standardowy obiekt wewnętrzny w JavaScript, co oznacza, że ​​przychodzi wbudowany w JavaScript. Służy do reprezentowania ostateczny wynik asynchronicznego bloku kodu (lub powód, dla którego kod się nie powiódł) i ma metody kontroli wykonanie kodu asynchronicznego.

Składnia

Możemy stworzyć wystąpienie Obietnica obiekt używając Nowy słowo kluczowe:

 nowa Obietnica (funkcja (rozwiązaj, odrzuć) ); 

Funkcja przekazany jako parametr do Obietnica() konstruktor jest znany jako wykonawca. Przechowuje kod asynchroniczny i ma dwa parametry Funkcjonować rodzaj, do którego odnosi się rozwiązać i odrzucać funkcje (więcej na ten temat wkrótce).

Stany Obietnica obiekt

The stan początkowy a Obietnica obiekt jest wywoływany w oczekiwaniu. W tym stanie wynik obliczeń asynchronicznych nie istnieje.

Początkowy stan oczekujący zmienia się na spełniony stan, kiedy obliczenie jest odnoszący sukcesy. The wynik obliczeń jest dostępny w tym stanie.

W przypadku obliczeń asynchronicznych zawodzi, Obietnica obiekt przenosi się do odrzucony stan od początku w oczekiwaniu stan. W tym stanie powód niepowodzenia obliczeń (tj. komunikat o błędzie) jest dostępny.

Aby przejść od w oczekiwaniu do spełniony stan, rozwiązać() jest nazywany. Aby przejść od w oczekiwaniu do odrzucony stan, odrzucać() jest nazywany.

The następnie i łapać metody

Kiedy stan zmiany od w oczekiwaniu do spełniony, obsługa zdarzeń Obietnica obiekt następnie metoda jest wykonywany. I kiedy stan zmiany od w oczekiwaniu do odrzucony, obsługa zdarzeń Obietnica obiekt łapać metoda jest wykonywany.

Przykład 1

“Nie promisjonowany” kod

Załóżmy, że jest hello.txt plik zawierający “dzień dobry” słowo. Oto jak możemy napisać żądanie AJAX do pobierz ten plik i pokaż jego zawartość, bez użycia Obietnica obiekt:

 funkcja getTxt () let xhr = new XMLHttpRequest (); xhr.open („GET”, „hello.txt”); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (this.response); złamać; case 404: throw 'File Not Found'; default: throw 'Nie udało się pobrać pliku';  catch (err) console.log (err);  getTxt (); 

Jeśli zawartość pliku była pomyślnie pobrany, to znaczy. kod statusu odpowiedzi to 200, tekst odpowiedzi to zapisane w dokumencie. Jeśli plik jest nie znaleziono (stan 404), za “Nie znaleziono pliku” pojawia się komunikat o błędzie. W przeciwnym razie a ogólny komunikat o błędzie wskazuje, że pobieranie pliku nie powiodło się.

“Obiecany” kod

A teraz Obiecuj powyższy kod:

 funkcja getTxt () zwraca nową Obietnicę (funkcja (rozwiązywanie, odrzucanie) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: resolve (this.response); case 404: reject ('File Not Found'); default: reject ('Nie udało się pobierz plik ');;);  getTxt (). then (funkcja (txt) document.write (txt);). catch (function (err) console.log (err);); 

The getTxt () funkcja jest teraz zakodowana zwróć nową instancję Obietnica obiekt, a jego funkcja executora przechowuje kod asynchroniczny sprzed.

Kiedy kod statusu odpowiedzi to 200, Obietnica jest spełniony przez powołanie rozwiązać() (odpowiedź jest przekazywana jako parametr rozwiązać()). Gdy kod stanu to 404 lub inny, Obietnica jest odrzucony za pomocą odrzucać() (z odpowiednim komunikatem o błędzie jako parametrem odrzucać()).

The obsługa zdarzeń dla następnie() i łapać() metody z Obietnica obiekt jest dodane na końcu.

Kiedy Obietnica jest spełniony, przewodnik następnie() metoda jest uruchomiona. Jego argumentem jest parametr przekazany z rozwiązać(). Wewnątrz procedury obsługi zdarzeń tekst odpowiedzi (odebrany jako argument) to zapisane w dokumencie.

Kiedy Obietnica jest odrzucony, obsługa zdarzeń łapać() metoda jest uruchomiona, rejestrowanie błędu.

The główna zaleta powyższej promisyfikowanej wersji kodu to obsługa błędów. Zamiast rzucać nieudane wyjątki - jak w wersji nie promisjonowanej - odpowiednie komunikaty o błędach są zwracane i rejestrowane.

Ale to nie tylko powracający z komunikaty o błędach ale także z wynik obliczeń asynchronicznych to może być dla nas naprawdę korzystne. Aby to zobaczyć, musimy rozszerzyć nasz przykład.

Przykład 2

“Nie promisjonowany” kod

Zamiast tylko wyświetlać tekst z hello.txt, chcę połącz to z “Świat” słowo i wyświetl go na ekranie po upływie 2 sekund. Oto kod, którego używam:

 funkcja getTxt () let xhr = new XMLHttpRequest (); xhr.open („GET”, „hello.txt”); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (concatTxt (this.response)); złamać; case 404: throw 'File Not Found'; default: throw 'Nie udało się pobrać pliku';  catch (err) console.log (err);  function concatTxt (res) setTimeout (function () return (res + 'World'), 2000);  getTxt (); 

Na kodzie statusu 200, concatTxt () funkcja jest wywoływana połącz tekst odpowiedzi z “Świat” słowo przed zapisaniem go w dokumencie.

Ale ten kod nie będzie działać zgodnie z oczekiwaniami. The setTimeout () funkcja zwrotna nie może zwrócić połączonego ciągu. To, co zostanie wydrukowane w dokumencie, to niezdefiniowany ponieważ to jest co concatTxt () zwraca.

“Obiecany” kod

Więc, aby kod działał, niech Obiecuj powyższy kod, włącznie z concatTxt ():

 funkcja getTxt () zwraca nową Obietnicę (funkcja (rozwiązywanie, odrzucanie) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: resolve (this.response); case 404: reject ('File Not Found'); default: reject ('Nie udało się pobierz plik ');;);  function concatTxt (txt) return new Promise (function (resolve, reject) setTimeout (function () resolve (txt + 'World');, 2000););  getTxt (). then ((txt) => return concatTxt (txt);). następnie ((txt) => document.write (txt);). catch ((err) => console. log (err);); 

Tak jak getTxt (), concatTxt () funkcja również zwraca nowy Obietnica obiekt zamiast połączonego tekstu. The Obietnica wrócił przez concatTxt () jest rozwiązany wewnątrz funkcji wywołania zwrotnego setTimeout ().

Pod koniec powyższego kodu, obsługa zdarzeń pierwszego następnie() metoda działa, gdy Obietnica z getTxt () jest spełniony, tj. kiedy plik jest został pomyślnie pobrany. Wewnątrz tego przewodnika, concatTxt () jest nazywany i Obietnica wrócił przez concatTxt () jest zwracany.

Obsługa zdarzeń drugiej następnie() metoda działa, gdy Obietnica wrócił przez concatTxt () jest spełniony, tj upłynęło dwie sekundy i rozwiązać() jest nazywany z połączonym ciągiem jako jego parametrem.

Wreszcie, łapać() łapie wszystkie wyjątki i komunikaty o błędach z obu obietnic.

W tej wersji Promisified, “Witaj świecie” ciąg będzie pomyślnie wydrukowane do dokumentu.