[ Leksykon ] [ JavaScript ] [ Obiekty ]
Obiekt Promise()
[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]
Konstruktor Promise():
Promise() - Tworzy nowy Promise obiekt
Właściwości Promise():
Promise[@@species] - Zwraca konstruktor używany do konstruowania wartości zwracanych na podstawie metod obietnicy
Metody Promise():
Promise.all() - Metoda spełnia się, gdy wszystkie się spełnią; odrzuca, gdy którakolwiek z obietnic zostaje odrzucona
Promise.allSettled() - Metoda spełnia się, gdy wszystkie zostaną spełnione zwraca (spełnione fulfilled lub odrzucone rejected)
Promise.any() - Metoda spełnia się, gdy spełni się którakolwiek z obietnic, Odrzuca, gdy wszystkie obietnice odrzucają
Promise.catch() - Metoda do obsługi błędów w obietnicy
Promise.finally() - Metoda wywoływana, niezależnie od tego, czy zostanie spełniona, czy odrzucona
Promise.race() - Metoda spełnia się, gdy którakolwiek zakończy jako pierwsza, odrzuca, gdy którakolwiek zostaje odrzucona
Promise.reject() - Metoda zwraca nowy Promise obiekt, który został odrzucony z podanego powodu
Promise.resolve() - Metoda zwraca Promise obiekt, który został spełniony z wartością
Promise.then() - Metoda do obsługi spełnienia i odrzucenia Promise
Promise.withResolvers() - Metoda zwraca obiekt zawierający nowy Promise obiekt i dwie funkcje { promise, resolve, reject }
Przykłady:
const WYBRANY_NR = 5;
// funkcja jest promise zwraca resolve, reject
function pracaA(resolve, reject) {
// wykonaj prace co 5
setTimeout(() => {
const czas = Date.now();
const reszta = czas % 10;
console.log(czas);
console.log(reszta);
if (reszta == WYBRANY_NR) {
resolve(reszta);
}
else if (reszta < WYBRANY_NR) {
reject(`Wybrana liczba jest za duża: ${reszta}`);
}
else if (reszta > WYBRANY_NR) {
resolve(reszta);
} else {
reject(`Błąd: NR: $(WYBRANY_NR), RESZTA: ${reszta}`);
}
//zadanieB();
}, 5000);
}
// sprawdzamy czy liczba jest parzysta
function pracaB1(reszta) {
const parzystaNR = reszta % 2 === 1;
console.log(`B1: ${reszta}`);
console.log(`B1: ${parzystaNR}`);
return { reszta, parzystaNR };
}
function pracaB2(przyczyna) {
const err = new Error(`Opis błędu, przyczyna: ${przyczyna}`, {komunikat: przyczyna} );
console.error(err);
throw err; // zostanie zatrzymane skok do pierwszego catch bloku
}
function pracaC(dane) { // { reszta, parzysta }
console.log(`C: ${dane.reszta}`);
console.log(`C: ${dane.parzystaNR}`);
return new Promise((resolve, reject) => {
const { reszta, parzystaNR } = dane;
if (reszta == WYBRANY_NR - 1) {
dane.tekst = parzystaNR ? "nieparzysta" : "parzysta";
resolve(dane); // { reszta, parzysta, tekst }
}
else if (reszta > WYBRANY_NR) {
dane.tekst = parzystaNR ? "nieparzysta" : "parzysta";
console.log(`Dane: reszta: ${dane.reszta} nie równa liczbie ${WYBRANY_NR}, reszta jest to liczba: ${dane.tekst}`);
reject(`Wybrana liczba jest za mała: ${reszta}, reszta: ${dane.tekst}`);
} else {
dane.tekst = parzystaNR ? "nieparzysta" : "parzysta";
resolve(dane);
}
});
}
function zadanieB() {
new Promise(pracaA)
.then(pracaB1, pracaB2)
.then(pracaC)
.then((dane) => { //
console.log(`Dane: reszta: ${dane.reszta} równa liczbie ${WYBRANY_NR} jest to liczba: ${dane.tekst}`);
return dane;
})
.catch((przyczyna) => {
if (przyczyna.komunikat) {
console.error("Opis błędu podany wcześniej!");
} else {
console.error(`Problem z pracaC(): ${przyczyna}`);
}
})
.finally((dane) => console.log("KONIEC!"));
}
zadanieB();
function zadanieNowe() {
return new Promise((resolve, reject) => {
const dialog = document.createElement("dialog");
dialog.innerHTML = `
<form method="dialog">
<p>Wybierz zadanie!</p>
<select>
<option value="zada">Zadanie A</option>
<option value="zadb">Zadanie B</option>
<option value="zadc">Zadanie C</option>
<option value="zadd">Zadanie D</option>
</select>
<menu>
<li><button value="cancel">Zamknij</button></li>
<li><button type="submit" value="ok">OK</button></li>
</menu>
</form>
`;
dialog.addEventListener("close", () => {
if (dialog.returnValue === "ok") {
resolve(dialog.querySelector("select").value);
} else {
reject(new Error("Anulowane!"));
}
});
document.body.appendChild(dialog);
dialog.showModal();
});
}
zadanieNowe()
.then(result => {
console.log(`Zadanie 1: ${result}`);
throw new Error("Stop!");
})
.then(result => {
console.log(`Zadanie 2...: ${result}`);
})
.catch(error => {
console.error(`Stop...: ${error}`);
});
Tworzymy konstruktor Promise
resolve - kończenie powodzeniem
reject - kończenie nie powodzeniem
Promise pending (w toku) w stanie oczekiwania w debuggerze, właściwość: PromiseStatus = "pending", właściwość: PromiseValue = undefined
Promise fulfilled (spełnione) w stanie settled zakończenia, właściwość: PromiseStatus = "resolved", właściwość: PromiseValue = "wiadomość pozytywna"
Promise rejected (odrzucone) w stanie settled zakończenia, właściwość: PromiseStatus = "rejected", właściwość: PromiseValue = "wiadomość negatywna"
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Przykładowe dane: trasa");
}, 500);
});
promise.then(result => {
console.log(result)
});
promise.catch(error => {
console.log(error)
});
const mojaPromise = new Promise((resolve, reject) => {
if (OperacjePozytywnie) {
resolve("wiadomość pozytywna"); // Promise fulfilled
} else {
reject("wiadomość negatywna"); // Promise rejected
}
});
class mojaPromise extends Promise {
ile = 7;
}
console.log(mojaPromise.resolve(1).then(() => {}).ile);
//7
const adresPromise = mojaPromise();
const adresPromiseUrl = adresPromise.then(powodzenieAdres, niepowodzenieAdres);
mojaPromise()
.then(function (result) {
return daneBoxA(result);
})
.then(function (drugiResult) {
return daneBoxB(newResult);
})
.then(function (trzeciResult) {
console.log(`Współrzędne trasy: ${trzeciResult}`);
})
.catch(niepowodzenieAdres);
// zastosowanie funkcji strzałek () => a jest to skrót od () => { return a; })
// ilekroć operacja napotka obietnicę, zwróć ją i odłóż jej obsługę do następnej then obsługi
mojaPromise()
.then((result) => daneBoxA(result))
.then((drugiResult) => daneBoxB(drugiResult))
.then((trzeciResult) => {
console.log(`Współrzędne trasy: ${trzeciResult}`);
})
.catch(niepowodzenieAdres);
Zagnieżdżanie to struktura kontrolna ograniczająca zakres catch instrukcji. W szczególności zagnieżdżony catch przechwytuje tylko błędy w swoim zakresie i poniżej, a nie błędy wyżej poza zagnieżdżonym zakresem. Można to wykorzystać do lokalizowania błędów:
mojaPromise()
.then((result) =>
mojaPromiseBoxA(result)
.then((drugiResult) => mojaPromiseBoxB(drugiResult))
.catch((e) => {});
)
.then(() => mojaPromiseBoxC()) // Zauważ, że () => x to skrót od () => { return x; }.
.catch((e) => console.error("Awaria mojaPromise: ${e.message}"));
Zauważ, że () => x to skrót od () => { return x; }. Jeśli mojaPromiseBoxA() i mojaPromiseBoxB() zawiodą zostaną zignorowane. Wewnętrzne catch procedura obsługi błędów przechwyci tylko awarie mojaPromiseBoxA() i mojaPromiseBoxB(). Kod jest wznawiany z mojaPromiseBoxC(). W ostatnim catch błąd zostanie wyłapany tylko jak mojaPromise() się nie powiedzie.
Przykład, możliwe jest tworzenie .then po niepowodzeniu i "Zadanie AAA" zostanie wykonane bez względu, czy "StopN!" było wykonane poprawnie czy nie, do testu wykorzystujemy instrukcję throw:
const mojaPromise = new Promise((resolve, reject) => {
console.log("StartN"); // StartN
resolve("StartM");
})
mojaPromise.then((value) => {
console.log(value); // StartM
throw new Error("StopN!");
})
.catch((e) => {
console.error(e.message); // StopN!
})
.then(() => {
console.log("Zadanie AAA"); // Zadanie AAA
});
Przykład, z kodem asynchronicznym z zastosowaniem async i await. Obietnice Promise przechwytując wszystkie błędy, nawet zgłaszane wyjątki i błędy programistyczne. Jest to niezbędne do funkcjonalnego składu operacji asynchronicznych.
const mojaPromise = new Promise((resolve, reject) => {
console.log("Start");
resolve();
})
async function trasa() {
try {
const result = await mojaPromise();
const drugiResult = await daneBoxA(result);
const trzeciResult = await daneBoxB(drugiResult);
console.log(`Współrzędne trasy: ${trzeciResult}`);
} catch (error) {
niepowodzenieAdres(error);
}
}
Jeżeli żaden moduł obsługi nie obsłuży zdarzenia odrzucenia obietnicy Promise(). Zdarzenie odrzucenia obietnicy zostanie wysłane do unhandledrejection gdy obietnica zostanie odrzucona, nie ma dostępnej procedury obsługi odrzucenia. Odrzucona obietnica, która już spowodowała unhandledrejection zdarzenie. Zdarzenie zostaje wysłane do rejectionhandled, gdy program obsługi jest dołączony do odrzuconej obsługi obietnicy. W obu przypadkach zdarzenie typu: PromiseRejectionEvent ma jako członków promise - właściwość wskazującą obietnicę, która została odrzucona, oraz reason właściwość, podaje powód odrzucenia obietnicy. To jest nic innego jak awaryjna obsługa błędów dla obietnic, więc wszystkie błędy trafią do tych samych programów obsługi zdarzeń, niezależnie od źródła.
Przykłady z zastosowaniem metody statycznej Promise.all(). Metoda zwraca obietnicę spełnioną, gdy wszystkie obietnice danych wejściowych iterowalne (agregującej tablicy) obietnic są spełnione. Jeżeli którakolwiek z obietnic wejściowych jest reject to zwróci obietnicy spełnionej. Spełnia się, gdy wszystkie obietnice się spełniają; odrzuca, gdy którakolwiek z obietnic zostaje odrzucona.
function mojaPromiseA() {
return new Promise((resolve, reject) => {
setTimeout(() => {resolve("Zadanie A"); }, 500)
});
}
const mojaPromiseB = new Promise((resolve, reject) => {
setTimeout(() => {resolve("Zadanie B"); }, 400)
});
function mojaPromiseC() {
return new Promise((resolve, reject) => {
setTimeout(() => {resolve("Zadanie C"); }, 300)
});
}
function mojaPromiseD() {
return new Promise((resolve, reject) => {
reject(new Error("reject"));
});
}
Promise.all([
mojaPromiseA(),
mojaPromiseB,
mojaPromiseC(),
mojaPromiseD()
])
.then(resolve => {
console.log(resolve);
})
.catch((error) => {
console.error(error.message);
});
Przykłady z zastosowaniem metody statycznej Promise.allSettled(). Metoda zwraca obietnicę z tablicą obiektów opisujących wynik każdej obietnicy spełnionej lub odrzuconej. Wszystkie obietnice się spełniają, a zwraca wynik gdy się zakończą, pozytywnie lub negatywnie..
function mojaPromiseA() {
return new Promise((resolve, reject) => {
setTimeout(() => {resolve("Zadanie A"); }, 500)
});
}
const mojaPromiseB = new Promise((resolve, reject) => {
setTimeout(() => {resolve("Zadanie B"); }, 400)
});
function mojaPromiseC() {
return new Promise((resolve, reject) => {
setTimeout(() => {resolve("Zadanie C"); }, 300)
});
}
function mojaPromiseD() {
return new Promise((resolve, reject) => {
reject("Zadanie C");
});
}
Promise.allSettled([
mojaPromiseA(),
mojaPromiseB,
mojaPromiseC(),
mojaPromiseD()
])
.then(resolve => {
console.log(resolve);
})
.catch((error) => {
console.error(error);
});
// return
// [
// {status: "fulfilled", value: "Zadanie A"},
// {status: "fulfilled", value: "Zadanie B"},
// {status: "fulfilled", value: "Zadanie C"},
// {status: "rejected", value: "Zadanie C"}
// ]
Przykłady z zastosowaniem metody statycznej Promise.any(). Pobiera iterowalny obiekt Promise i gdy tylko spełni się jedna z obietnic w iterowalnym, zwraca pojedynczą obietnicę, która spełnia wartość z tej obietnicy. Spełnia się, gdy spełni się którakolwiek z obietnic; odrzuca, gdy wszystkie obietnice odrzucają.
function mojaPromiseA() {
return new Promise((resolve, reject) => {
setTimeout(() => {resolve("Zadanie A"); }, 500)
});
}
const mojaPromiseB = new Promise((resolve, reject) => {
setTimeout(() => {resolve("Zadanie B"); }, 400)
});
function mojaPromiseC() {
return new Promise((resolve, reject) => {
setTimeout(() => {resolve("Zadanie C"); }, 300)
});
}
function mojaPromiseD() {
return new Promise((resolve, reject) => {
reject("Zadanie C");
});
}
Promise.any([
mojaPromiseA(),
mojaPromiseB,
mojaPromiseC(),
mojaPromiseD()
])
.then(resolve => {
console.log(resolve);
})
.catch((error) => {
console.error(error);
});
Promise.any([
Promise.reject(new Error("jest błąd")),
]).catch((e) => {
console.log(e instanceof AggregateError); // true
console.log(e.message); // Wszystkie obietnice odrzucone
console.log(e.name); // aggregateerror
console.log(e.errors); // [ Error: "jest błąd" ]
});
Przykłady z zastosowaniem metody statycznej Promise.race(). Czeka, aż któraś z obietnic zostanie spełniona lub odrzucona. Jeśli zwrócona obietnica się spełni, zostanie spełniona z wartością pierwszej spełnionej obietnicy w iterowalnym. Jeśli odrzuca, zostaje odrzucona z uzasadnieniem z pierwszej odrzuconej obietnicy. Rozlicza się, gdy spełni się którakolwiek z obietnic. Spełnia się, gdy którakolwiek z obietnic zakończy jako pierwsza; odrzuca, gdy którakolwiek z obietnic zostaje odrzucona.
function mojaPromiseA() {
return new Promise((resolve, reject) => {
setTimeout(() => {resolve("Zadanie A"); }, 500)
});
}
const mojaPromiseB = new Promise((resolve, reject) => {
setTimeout(() => {resolve("Zadanie B"); }, 400)
});
function mojaPromiseC() {
return new Promise((resolve, reject) => {
setTimeout(() => {resolve("Zadanie C"); }, 300)
});
}
function mojaPromiseD() {
return new Promise((resolve, reject) => {
reject("Zadanie C");
});
}
Promise.race([
mojaPromiseA(),
mojaPromiseB,
mojaPromiseC(),
mojaPromiseD()
])
.then(resolve => {
console.log(resolve);
})
.catch((error) => {
console.error(error);
});
Przykłady z zastosowaniem metody statycznej Promise.reject(). Zwraca nowy Promise obiekt, który został odrzucony z podanego powodu.
const mojaPromise = new Promise((resolve, reject) => {
if (OperacjePozytywnie) {
resolve("wiadomość pozytywna"); // Promise fulfilled
} else {
reject("wiadomość negatywna"); // Promise rejected
}
});
Przykłady z zastosowaniem metody statycznej Promise.resolve(). Zwraca nowy Promiseo biekt, który jest rozpoznawany z podaną wartością. Jeśli wartością jest wartość thenable (tj. ma then metodę), zwrócona obietnica "follow" za tą wartością, przyjmując jej ostateczny stan; otherwise, w przeciwnym razie zwrócona obietnica zostanie spełniona z wartością. Jeśli nie wiesz, czy wartość jest obietnicą, czy nie, Promise.resolve(value) zamiast tego działaj z wartością zwracaną jako obietnicą.
const mojaPromise = new Promise((resolve, reject) => {
if (OperacjePozytywnie) {
resolve("wiadomość pozytywna"); // Promise fulfilled
} else {
reject("wiadomość negatywna"); // Promise rejected
}
});
Przykłady z zastosowaniem metody Promise.finally(). Dołącza procedurę obsługi do obietnicy i zwraca nową obietnicę, kiedy wszystkie operacje się zakończą, pozytywnie czy negatywnie. Metoda finally() może być przydatna, jeśli chcesz wykonać przetwarzanie lub czyszczenie po rozliczeniu obietnicy, niezależnie od jej wyniku.
mojaPromise()
.then(function (result) {
return daneBoxA(result);
})
.then(function (drugiResult) {
return daneBoxB(newResult);
})
.then(function (trzeciResult) {
console.log(`Współrzędne trasy: ${trzeciResult}`);
return trzeciResult;
})
.catch((niepowodzenieAdres) => {
if (niepowodzenieAdres) {
console.error("error A");
} else {
console.error(`error B: ${niepowodzenieAdres}`);
}
})
.finally((trzeciResult) => console.log("Dodatkowe dane"));
.finally(() => {
zadanie = false;
});
.finally(() => {
console.log("zadanie ON");
});
onFinally funkcja wywołująca, gdy Promise sprawa zostanie uregulowana. Ten program obsługi nie otrzymuje żadnych parametrów.
.finally(onFinally);
Przykłady z zastosowaniem metody Promise.then(). Dołącza procedury obsługi spełnienia i odrzucenia do obietnicy i zwraca nową obietnicę zwracając wartość zwracaną przez wywołaną procedurę obsługi lub jej pierwotną ustaloną wartość, jeśli obietnica nie została obsłużona jeśli odpowiednia procedura obsługi onFulfilled lub, onRejected gdy nie jest funkcją.
mojaPromise()
.then((result) => daneBoxA(result))
.then((drugiResult) => daneBoxB(drugiResult))
.then((trzeciResult) => {
console.log(`Współrzędne trasy: ${trzeciResult}`);
})
.catch(niepowodzenieAdres);
Przykłady z zastosowaniem metody Promise.catch(). Dołącza wywołanie zwrotne procedury obsługi odrzucenia do obietnicy i zwraca nową obietnicę, która zwraca wartość wywołania zwrotnego, jeśli jest wywoływana, lub pierwotną wartość spełnienia, jeśli obietnica jest spełniona..
mojaPromise()
.then((result) => daneBoxA(result))
.then((drugiResult) => daneBoxB(drugiResult))
.then((trzeciResult) => {
console.log(`Współrzędne trasy: ${trzeciResult}`);
})
.catch(niepowodzenieAdres);
const promiseA = new Promise((resolve, reject) => {
throw new Error("Stop!");
});
promiseA.catch((error) => {
console.error(error);
}); // zwróci: Stop!
const promiseA = new Promise((resolve, reject) => {
resolve("Gotowe!");
});
promiseA.then((value) => {
console.log(value); // Gotowe!
throw new Error("wiadomość o błędzie");
})
.catch((e) => {
console.error(e.message); // wiadomość o błędzie
})
.then(
() => console.log("wiadomość to koniec"),
);
const promiseA = new Promise((resolve, reject) => {
resolve("Gotowe!");
});
promiseA.then((value) => {
console.log(value); // Gotowe!
return Promise.reject("błąd");
})
.catch((e) => {
console.error(e); // błąd
})
.then(
() => console.log("wiadomość to koniec"),
);
<script>
window.onload = () => {
let count = 0;
function zadanieE() {
const ile = ++count;
const konsola = document.getElementById("konsola");
konsola.insertAdjacentHTML("beforeend", `${ile}) Start<br>`);
const p1 = new Promise((resolve, reject) => {
konsola.insertAdjacentHTML("beforeend", `${ile}) Zadanie Time!<br>`);
setTimeout( () => {resolve(ile)}, Math.random() * 2500 + 800);
});
p1.then((daneA) => {
konsola.insertAdjacentHTML("beforeend", `${daneA}) Zadanie OK!<br>`);
})
.catch((reason) => {
console.log(`Zdanie OFF "(${reason})"`);
});
konsola.insertAdjacentHTML("beforeend", `${ile}) Stop<br>`);
}
const przycisk = document.getElementById("start");
przycisk.addEventListener("click", zadanieE);
return;
};
</script>
<button id="start">Start</button>
<div id="konsola"></div>
Opis:
Obiekt Promise() reprezentuje ostateczne zakończenie lub niepowodzenie operacji asynchronicznej i jej wynikową wartość. Promise jest zastępcą wartości, która niekoniecznie jest znana w momencie tworzenia promesy. Umożliwia powiązanie procedur obsługi z ostateczną wartością sukcesu lub przyczyną niepowodzenia akcji asynchronicznej. Dzięki temu metody asynchroniczne zwracają wartości podobnie jak metody synchroniczne, zamiast natychmiast zwracać wartość końcową, metoda asynchroniczna zwraca obietnicę dostarczenia wartości w pewnym momencie w przyszłości.
Promise znajduje się w jednym z następujących stanów:
oczekujący: stan początkowy, ani spełniony, ani odrzucony
spełniony: oznacza, że operacja została pomyślnie zakończona
odrzucony: co oznacza, że operacja się nie powiodła
Ostateczny stan oczekującej obietnicy może zostać spełniony z wartością lub odrzucony z podaniem powodu błąd. Gdy wystąpi którakolwiek z tych opcji, wywoływane są powiązane procedury obsługi ustawione w kolejce według metody obietnicy then. Jeżeli obietnica została już spełniona lub odrzucona po dołączeniu odpowiedniego programu obsługi, zostanie on wywołany, zatem nie ma sytuacji wyścigu pomiędzy zakończeniem operacji asynchronicznej a dołączeniem jej programów obsługi. Obietnicę uważa się za rozliczoną, jeśli zostanie spełniona lub odrzucona, ale nie jest oczekująca. Metody Promise.prototype.then(), Promise.prototype.catch(), Promise.prototype.finally() służą do powiązania dalszego działania z obietnicą, która zostaje spełniona. Ponieważ metody te dają obietnice, można je połączyć. Wyrażenia funkcji strzałkowych mogą mieć niejawny zwrot więc () => x jest skrótem od () => { return x; }.
Zobacz też:
AggregateError() - obiekt prezentuje błąd, gdy kilka błędów musi być zawiniętych w jeden błąd
Promise.all() - Metoda zwraca obietnicę spełnioną, wszystkie obietnice są spełnione...
Promise.allSettled() - Metoda zwraca pojedynczy plik Promise, wszystkie obietnice są (spełnione fulfilled lub odrzucone rejected)
Promise.any() - Metoda spełnia się, gdy spełni się którakolwiek z obietnic, Odrzuca, gdy wszystkie obietnice odrzucają.
Promise.race() - Metoda spełnia się, gdy którakolwiek z obietnic zakończy jako pierwsza
async() - Funkcja asynchroniczna async, await, promise, zwraca obietnicę
await - operator wstrzymuje wykonywanie otaczającej go async()
throw - Wykonywanie bieżącej funkcji zostanie zatrzymane, skok do catch
fetch() -
insertAdjacentHTML() -
Linki:
unhandledrejection -