๐ด Using Promises
const test = new Promise((resolve, reject) => {
// If Promise ends successfully,
setTimeout(resolve, 2000, "Promise end successfully!");
// === resolve("Promise end successfully!");
// If Promise return error
setTimeout(reject, 2000, "Promise return error!");
});
test.then(result => console.log(result)) // resolve => thenโ
.catch(error => console.log(error)); // reject => catchโ
๐ Chaining Promises
const test = new Promise((resolve, reject) => {
resolve(2); // then์ 2 ์ ๋ฌ
});
test.then(nubmer => {
console.log(number * 2); // 4
return number * 2; // for Promise Chainingโ
})
.then(otherNumber => {
console.log(otherNumber * 2); // 8
});
const test = new Promise((resolve, reject) => {
resolve(2); // then์ 2 ์ ๋ฌ
});
const timesTwo = number => number * 2;
test
.then(timesTwo)
.then(timesTwo)
.then(timesTwo)
.then(timesTwo)
.then(timesTwo)
.then(() => {
throw Error("Something is wrong");
})
.then(lastNumber => console.log(lastNumber))
.catch(error => console.log(error)); // Error: Something is wrong
๐ก Promise.all
โช ๋ชจ๋ promise๊ฐ ๋์์ ๋์ํ๋์ง ํ์ธํ๋๊ฒ ์ค์ํ ๋ ์ฌ์ฉํ๋ค.
โช ํ๋์ promise๋ผ๋ reject ๋๋ค๋ฉด ์๋ฌ๋ฅผ ๋ฐ์์ํค๋ฉฐ, ์ดํ promise๋ ์คํํ์ง ์๋๋ค.
const p1 = new Promise(resolve => {
setTimeout(resolve, 10000, "First");
});
const p2 = new Promise(resolve, reject) => {
setTimeout(reject, 1000, "Not Second, Error");
});
const p3 = new Promise(resolve => {
setTimeout(resolve, 3000, "Third");
});
const motherPromise = Promise.all([p1, p2, p3]);
// ๋ชจ๋ Promise์ resolve๊ฐ ์คํ๋๊ณ ๋์ ํ๊บผ๋ฒ์ ๊ฐ์ด then์ผ๋ก ๋์ด๊ฐโ
motherPromise
.then(values => console.log(values))
.catch(error => console.log(error));
๐ข Promise.race
const p1 = new Promise(resolve => {
setTimeout(resolve, 10000, "First");
});
const p2 = new Promise((resolve, reject) => {
setTimeout(reject, 5000, "I hate JS");
});
const p3 = new Promise(resolve => {
setTimeout(resolve, 3000, "Third");
});
// p1, p2, p3 ์ค resolve, reject์ ์๊ด์์ด ๊ฐ์ฅ ๋นจ๋ฆฌ ์คํ๋๋ ๊ฒ์ ๋๊ฒจ์ค๋คโ
Promise.race([p1, p2, p3])
.then(values => console.log(values))
.catch(error => console.log(error));
๐ต allSettled
โช ๋ชจ๋ promise๊ฐ ๋ชจ๋ ์ ๋์ํ๋์ง ํ์ธํ ํ์๊ฐ ์์ ๋ allSettled๋ฅผ ์ฌ์ฉํ๋ค.
โช ์ผ๋ถ๋ ๋์ํ๊ณ , ์ผ๋ถ๋ ๋์ํ์ง ์์๋ response์ error๋ฅผ ๊ฐ์ด ์ถ๋ ฅํด์ค๋ค.
const p = Promise.allSetteld([
fetch("https://yts.mx/api/v2/list_movies.json"),
fetch(),
fetch("https://yts.mx/api/v2/list_movies.json"),
fetch(),
]);
.then(response => console.log("Success!", response))
.catch(error => console.log("Error: ", error));
๐ฃ .finally
const p1 = new Promise((resolve, reject) => {
setTimeout(reject, 5000, "First");
})
.then(value => console.log(value))
.catch(error => console.log(error))
.finally(() => console.log("I'm done"));
// finally :: then์ด๋ catch์ ์๊ด์์ด ๋ฌด์กฐ๊ฑด ์คํ๋๋คโ
๐ค Real world Promises
fetch("http://127.0.0.1:8080/")
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log(error));
// API์ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๋ฉด response๋ฅผ ๋ฐ๊ฒ๋๋ค.
// response๋ json ํํ๊ฐ ์๋๊ธฐ ๋๋ฌธ์ .text()๋ก ๋ฐ์ดํฐ๋ฅผ ๋ณํ์ํจ๋ค.
// ๊ทธ ๊ณผ์ ์์ ๋ ํ๋์ Promise๊ฐ ๋ฐ์ํ๋ค.
'JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ JS ] Classes (0) | 2022.07.06 |
---|---|
[ JS ] Async / Await (0) | 2022.07.06 |
[ JS ] For Loop (0) | 2022.07.05 |
[ JS ] Rest And Spread (0) | 2022.07.05 |
[ JS ] Destructuring (0) | 2022.07.05 |