1. Promise
1.1 Promise 사용법 - 1 ( 프로미스 객체 생성 )
-
new Promise(): 프로미스 생성자 함수 호출 -
executer(): 프로미스 생성자 함수에서 인자로 받는 함수 ( 화살표함수가executer임 ) -
프로미스 생성자 함수에서 인수로 넣어주는 함수
1.resolve(): 내부 비동기 작업이 성공 시 호출하는 함수
2.reject(): 내부 비동기 작업이 실패 시 호출하는 함수
executor는 생성 즉시 실행된다.
즉, 내부의 비동기 요청을 즉시 실행되고 성공 or 실패에 대한 결괏값만 미리 준비를 해놓고 이후에 then() or catch()에 의해서 결괏값을 받아서 처리한다.
const promise = new Promise((resolve, reject) => {
// 비동기 작업
// fetch
// 성공
resolve("작업값");
// 실패
reject(new Error("실패 이유"));
})1.2 Promise 사용법 - 2 ( 프로미스 실행 )
then(callback): 프로미스가resolve()를 실행했을 경우 실행된다.catch(callback): 프로미스가reject()를 실행했을 경우 실행된다.
// 프로미스 크리에어터 함수
const promiseAsync = (age) => {
return new Promise((resolve, reject) => {
age >= 20 ? resolve(`${age}살 이네요!`) : reject(new Error("미성년자시네요..."))
});
}
// "22살 이네요!"
const promiseSuccess = promiseAsync(22);
promiseSuccess
.then(v => console.log(v))
.catch(error => console.error(error));
// "미성년자시네요..."
const promiseFailure = promiseAsync(22);
promiseFailure
.then(v => console.log(v))
.catch(error => console.error(error));1.3 Promise의 상태
프로미스는 3가지의 상태 중 하나를 가집니다.
pending: 대기 상태로executor()에서resolve()나reject()를 호출하지 않은 상태fulfilled: 이행 상태로executor()에서resolve()를 호출한 상태rejected: 거부 상태로executor()에서reject()를 호출한 상태
2. async와 await
2.1 async
asynchronous의 줄임말로 비동기를 의미함
함수 앞에 붙여줄 수 있으며, 함수 앞에 async를 붙일 경우 반환값이 자동적으로 new Promise()가 된다.
2.2 await
async함수 내부에서만 사용할 수 있고, promise객체 앞에 붙일 수 있다.
promise객체가 결괏값을 반환할 때까지 기다렸다가 실행한다.
여기서 결괏값을 반환할 때까지 기다린다는 의미는 fulfilled상태나 rejected상태가 될 때까지 기다린다는 의미입니다.
2.3 예시
// 프로미스 크리에어터 함수
const promiseAsync = async (age) => {
return age >= 20 ? `${age}살 이네요!` : new Error("미성년자시네요...");
}
// 즉시 실행 함수
(async () => {
try {
const promiseSuccess = promiseAsync(22);
const successResult = await promiseSuccess;
console.log(successResult); // 22살 이네요!
const promiseFailure = promiseAsync(18);
const failureResult = await promiseFailure;
console.log(failureResult); // 미성년자시네요...
} catch (error) {
console.error(error);
}
})();3. Promise API
3.1 Promise.resolve()
성공한 프로미스를 즉시 반환함
3.2 Promise.reject()
실패한 프로미스를 즉시 반환함
3.3 Promise.all()
프로미스들을 배열로 받아서 프로미드들중에 하나라도 reject되면 즉시 다른 프로미스 종료하고 reject됨
// 아래처럼 resolve()에서 반환한 값으로만 배열을 만들어서 반환해줌
[1, 2, 3]3.4 Promise.allSettled()
Promise.all()과 같은 역할을 하면서 중간에 reject돼도 모든 결과를 받아서 실행함
// 아래와 같은 형식으로 반환함
[
{ status: 'fulfilled', value: 1 },
{
status: 'rejected',
reason: Error: 에러 생성
}
]3.5 Promise.race()
가장 먼저 처리되는 결괏값만 반환합니다.
성공/실패 여부에 상관없이 먼저 처리되는 값을 반환한다.
3.6 Promise API 예시
// "success"
Promise.resolve("success")
.then(console.log)
.catch(console.error);
// Error: 에러!!
Promise.reject("에러!!")
.then(console.log)
.catch(console.error);
const promiseTimerCreator = (state, value, time) => new Promise((resolve, reject) => {
setTimeout(() => {
state ? resolve(value) : reject(new Error(`Error!!! ${value}`));
}, time);
})
// 2초뒤 실행 => ["1초", "2초"]
// 여기에 만약 reject된 값이 있다면 즉시 catch부분 실행
Promise
.all([promiseTimerCreator(true, "1초", 1000), promiseTimerCreator(true, "2초", 2000)])
.then(console.log)
.catch(console.error);
// 2초뒤 실행 => [{ status:"fulfulled", value: "1초" }, { status:"rejected", reason: Error: Error!!! 2초 }]
Promise
.allSettled([promiseTimerCreator(false, "1초", 1000), promiseTimerCreator(true, "2초", 2000)])
.then(console.log)
.catch(console.error);
// 1초뒤 실행 => 1초
// 실행결과가 resolve든 reject든 상관없이 먼저 처리된 결과를 반환함
Promise
.race([promiseTimerCreator(true, "1초", 1000), promiseTimerCreator(true, "2초", 2000)])
.then(console.log)
.catch(console.error);4. 의문
await은 왜async함수 내부에서만 사용이 가능할까?
참고한 사이트
