zrozumienie obietnic JavaScript

Wprowadzenie do obietnic

obietnica jest powszechnie definiowana jako proxy dla wartości, która ostatecznie stanie się dostępna.

obietnice są jednym ze sposobów radzenia sobie z kodem asynchronicznym, bez utknięcia w piekle wywołania zwrotnego.

obietnice są częścią języka od lat (standaryzowane i wprowadzone w ES2015), a ostatnio stały się bardziej zintegrowane, z asynchronicznym i oczekującym w ES2017.,

funkcje asynchroniczne wykorzystują obietnice za kulisami, więc zrozumienie, jak działają obietnice, jest fundamentalne dla zrozumienia, jak działająasync Iawait.

Jak działają obietnice, w skrócie

Po wywołaniu obietnicy rozpocznie się ona w stanie oczekującym. Oznacza to, że funkcja wywołująca kontynuuje wykonywanie, podczas gdy obietnica jest w oczekiwaniu aż do jej rozwiązania, dając funkcji wywołującej jakiekolwiek dane były wymagane.,

utworzona obietnica ostatecznie zakończy się w stanie rozwiązanym lub w stanie odrzuconym, wywołując odpowiednie funkcje wywołania zwrotnego (przekazane dothen Icatch) po zakończeniu.

które API js używają?

oprócz własnego kodu i kodu bibliotek, obietnice są używane przez standardowe nowoczesne API internetowe, takie jak:

• API Baterii
• API pobierania
• Service Workers

jest mało prawdopodobne, że we współczesnym JavaScript znajdziesz się nie używając obietnic, więc zacznijmy od razu do nich.,

Tworzenie obietnicy

API Promise wyświetla konstruktor obietnicy, który inicjalizujesz za pomocą new Promise():

jak widzisz, obietnica sprawdza globalną stałą done I jeśli to prawda, obietnica przechodzi w stan rozwiązany (od done 1b277daada”> wywołanie zwrotne); w przeciwnym razie wywołanie zwrotnereject jest wykonywane, umieszczając obietnicę w stanie odrzuconym., (Jeśli żadna z tych funkcji nie zostanie wywołana w ścieżce wykonania, obietnica pozostanie w stanie oczekującym)

używającresolve Ireject, możemy z powrotem komunikować się z wywołującym, jaki był Wynikowy stan obietnicy i co z nim zrobić. W powyższym przypadku po prostu zwróciliśmy łańcuch znaków, ale może to być obiekt lub null. Ponieważ stworzyliśmy obietnicę w powyższym fragmencie, została ona już wykonana. Ważne jest, aby zrozumieć, co dzieje się w poniższym rozdziale.,

bardziej powszechnym przykładem, z którym możesz się spotkać, jest technika zwana Promisifying. Ta technika jest sposobem na użycie klasycznej funkcji JavaScript, która wymaga wywołania zwrotnego i zwraca obietnicę:

w ostatnich wersjach Node.js, nie będziesz musiał wykonywać tej ręcznej konwersji dla wielu API. W module util dostępna jest funkcja obiecująca, która zrobi to za Ciebie, biorąc pod uwagę, że funkcja, którą obiecujesz, ma prawidłowy podpis.,

spożywanie obietnicy

w ostatniej sekcji przedstawiliśmy sposób tworzenia obietnicy.

teraz zobaczmy, jak obietnica może zostać wykorzystana lub wykorzystana.

uruchomieniecheckIfItsDone() określi funkcje do wykonania, gdyisItDoneYet obietnica zostanie rozwiązana (w wywołaniuthen) lub odrzuci (w wywołaniucatch).

obietnice łańcuchowe

obietnica może być zwrócona do innej obietnicy, tworząc łańcuch obietnic.,

świetnym przykładem obietnic łańcuchowych jest API Fetch, którego możemy użyć, aby uzyskać zasób i ustawić łańcuch obietnic do wykonania, gdy zasób zostanie pobrany.

API Fetch jest mechanizmem opartym na obietnicach, a wywołanie fetch()jest równoznaczne z zdefiniowaniem własnej obietnicy za pomocą new Promise().

przykład obietnic łańcuchowych

w tym przykładzie wywołujemy fetch(), aby uzyskać listę elementów TODO z pliku todos.json znalezionego w katalogu głównym domeny i tworzymy łańcuch obietnic.,

uruchamianie fetch() zwraca odpowiedź, która ma wiele właściwości, a wewnątrz nich odwołujemy się:

• status, wartość liczbowa reprezentująca kod statusu HTTP
• statusText, komunikat o stanie, który jest OK jeśli żądanie się powiodło

response ma również metodę json(), która zwraca obietnicę, która zostanie rozwiązana z zawartością ciała przetworzonego i przekształconego w JSON.,

biorąc pod uwagę te przesłanki, dzieje się tak: pierwszą obietnicą w łańcuchu jest funkcja, którą zdefiniowaliśmy, o nazwie status(), która sprawdza status odpowiedzi i jeśli nie jest odpowiedzią pomyślną (między 200 a 299), odrzuca obietnicę.

Ta operacja spowoduje, że łańcuch obietnic pominie wszystkie wymienione obietnice i przejdzie bezpośrednio do instrukcji catch() na dole, rejestrując tekst Request failed wraz z Komunikatem o błędzie.,

Jeśli to się powiedzie, wywoła zdefiniowaną przez nas funkcjęjson(). Ponieważ poprzednia obietnica, gdy się powiedzie, zwróciła obiekt response, otrzymujemy go jako wejście do drugiej obietnicy.

w tym przypadku zwracamy dane przetworzone przez JSON, więc trzecia obietnica otrzymuje JSON bezpośrednio:

.then((data) => { console.log('Request succeeded with JSON response', data)})

i po prostu logujemy je do konsoli.

Obsługa błędów

w przykładzie, w poprzedniej sekcji, mieliśmycatch, który został dołączony do łańcucha obietnic.,

Gdy cokolwiek w łańcuchu obietnic zawiedzie i spowoduje błąd lub odrzuci obietnicę, Kontrola przechodzi do najbliższego catch() polecenia w dół łańcucha.

błędy kaskadowe

Jeśli wewnątrzcatch() pojawi się błąd, możesz dołączyć drugicatch(), aby go obsłużyć i tak dalej.

new Promise((resolve, reject) => { throw new Error('Error')}) .catch(err => { throw new Error('Error') }) .catch(err => { console.error(err) })

obietnica.,all()

jeśli chcesz zsynchronizować różne obietnice, Promise.all() pomaga zdefiniować listę obietnic i wykonać coś, gdy wszystkie zostaną rozwiązane.

przykład:

składnia przypisywania destrukcji ES2015 pozwala również na

Promise.all().then(() => { console.log('Results', res1, res2)})

nie ograniczasz się do używaniafetch oczywiście każda obietnica może być używana w ten sposób.

obietnica.,race()

Promise.race() uruchamia się, gdy pierwsza obietnica, którą przekazujesz, rozwiązuje się i uruchamia dołączone wywołanie zwrotne tylko raz, z wynikiem pierwszej obietnicy rozwiązanym.,

przykład:

typowe błędy

Uncaught TypeError: undefined is not a promise

Jeśli pojawi się błąd Uncaught TypeError: undefined is not a promise w konsoli upewnij się, że używasz new Promise() zamiast tylko Promise()

unhandledpromiserejectionwarning

oznacza to, że obietnica, którą nazwałeś odrzucona, ale nie było catch używana do obsługi błędu. Dodaj catchpo obrazieniu then aby poprawnie to obsłużyć.