728x90
상태를 나타내는 state는 pending(대기),rejected(거부됨),fulfilled(이행됨) 세가지
Promise를 선언할때 받는 파라미터는 resolve과 reject를 받는데
resolve : 성공했을때, reject는 실패했을때 사용
const pr = new Promise((resolve, reject ) => {
setTimeout(()=>{
resolve('OK');//성
},3000)
});
//응답후 처리
pr.then(
function(result){}
).catch(
function(err){}
).finally{
function(){
console.log('주문 ');
}
}
Promise.all : 프로미스들을 한번에 실행하고싶을때 사용 Promise.race : 프로미스들을 한번에 실행하나라도 먼저 완료되면 끝냄
//프로미스를 쓴 함수 f1,f2,f3을 배열에넣고 한번에 사용가능
Promise.all([f1(), f2(), f3()]).then((res) =>{
console.log(res);
}
async -> 특정 함수에 붙이면 promise 를 반환시켜줌
await -> async 내부에서 사용
async function order(){
try{
const result1 = await f1();
const result2 = await f2();
const result3 = await f3();
}catch(e){
console.log(e);
}
}
promise 를 간결하게 쓴다는 느낌 때문에 많이 사용한다고 한다
function startAsync(age) {
return new Promise((resolve, reject) => {
if (age > 20) resolve();
else reject();
});
}
const promise1 = startAsync(25);
promise1
.then(() => {
console.log("1 then!");
})
.catch(() => {
console.log("1 catch!");
});
const promise2 = startAsync(15);
promise2
.then(() => {
console.log("2 then!");
})
.catch(() => {
console.log("2 catch!");
});
function startAsync(age) {
return new Promise((resolve, reject) => {
if (age > 20) {
// 뭔가를 합니다.
return resolve(`${age} success`);
}
// 또 뭔가를 합니다.
return reject(new Error(`${age} is not over 20`));
// 여기 있는 코드는 절대 실행되지 않습니다.
});
}
// 기존
// function startAsync(age) {
// return new Promise((resolve, reject) => {
// if (age > 20) resolve(`${age} success`);
// else reject(new Error(`${age} is not over 20`));
// });
// }
async function startAsync(age) {
if (age > 20) return `${age} success`;
else throw new Error(`${age} is not over 20`);
}
const promise1 = startAsync(25);
promise1
.then((value) => {
console.log(value);
})
.catch((error) => {
console.error(error);
});
const promise2 = startAsync(15);
promise2
.then((value) => {
console.log(value);
})
.catch((error) => {
console.error(error);
});
728x90
'Web > JavaScript' 카테고리의 다른 글
[Bubbling, Capturing] (1) | 2023.10.21 |
---|---|
[browser event] 자주 이용하는 DOM 이벤트 (1) | 2023.10.20 |
DOMContentLoaded, load, beforeunload, unload 이벤트 (0) | 2023.10.19 |
[Mozilla WEB API] HTMLElement: dataset property (0) | 2023.10.19 |
자주 쓰이는 자바스크립트 코드 함수들 정리 1 (0) | 2023.10.12 |