Promise 객체

YEZI🎐·2022년 7월 12일
0

Javascript

목록 보기
8/13

간단하게 비동기 방식을 설명하자면,
코드1의 실행이 완료될 때 까지 기다리지 않고 코드2를 실행시킨다.
그리고 코드1의 실행이 완료(성공 or 실패)되면 특정 코드를 실행시키는 것이다.

이것을 가능하게 해주는 것은 Promise이다.

Promise

새로운 Promise 객체를 생성하여 사용하며,
Promise는 성공인지 실패인지 모르는 값을 위한 대리자
비동기 연산이 종료된 이후에 성공(resolve)과 실패(reject)를 처리하기 위해 사용한다.

new Promise((resolve, reject) => {
	// 비동기 방식으로 실행시킬 코드
.then(function (response) {
    // 성공했을 때
    console.log(response);
})
.catch(function (error) {
    // 에러가 났을 때
    console.log(error);
})
.finally(function () {
    // 항상 실행되는 함수
});

비동기 방식을 실행키실 코드가 성공 시 resolve, 실패 시 reject를 실행한다.
성공 시 .then(response), 실패 시 .then(..., error) or .catch(error)를 이용해 프라미스 체이닝(promise chaining)을 할 수 있다.

async / await

async 함수는 결론적으로 비동기 객체인 Promise 객체를 반환하기 때문에 아래 코드는 둘 다 같은 작용을 한다.
Promise 대신 함수 앞에 async, then 대신 await로 대체된다.

functoin foo(){ 
	return Promise.resolve(1);
};
/* ↑ 같은 거 ↓ */
async functoin foo(){
	return 1;
};
async function foo() {
    await 1
}
/* ↑ 같은 거 ↓ */
function foo() {
    return Promise.resolve(1).then(() => undefined)
}

async

기본 함수 앞에 async를 사용하면 결과를 직접 반환하는 것이 아닌 Promise를 반환한다.

async function hello() { return 'hello' };
/* ↑ 같은 거 ↓ */
let hello = async function () { return 'hello' };
/* ↑ 같은 거 ↓ */
let hello = async () => { return 'hello' };


hello();

Promise가 반환되기 때문에 반환된 값을 사용하기 위해선 .then()을 사용해야 한다.

hello().then((value) => console.log(value));

await

하지만 async를 사용하면 then 대신 await로 대체할 수 있다.
awaitasync 함수 안에서만 쓸 수 있다.
코드의 실행이 완료될 때 까지 잠시 중단하고, 결과를 반환하지만 함수 내부의 코드가 아닌 코드는 중지시키지 않고 그대로 실행된다.

async function hello() {
  return greeting = await Promise.resolve('hello');
};


hello().then(alert);
profile
까먹지마도토도토잠보🐘

0개의 댓글