[JS] Syntax | 06. Promise

 콜백(Callback)은 함수의 매개변수로 또 다른 함수로 전달하는 것입니다.

콜백은 비동기 처리가 가능하다는 장점이 있지만, 콜백 헬 현상이 나타날 수도 있다는 단점 또한 존재합니다.

이 문제를 해결하기 위해 사용하는 문법이 Promise입니다.

Promise()

Promise는 비동기 작업이 완료되면 값을 알려주는 객체입니다. 작업이 완료되면 값을 알려줄 것을 '약속'하기 때문에 promise라고 부릅니다.

 

Promise는 비동기 함수를 감싸며, 해당 비동기 함수는 resolve와 reject 함수들을 인자로 가집니다.

resolve는 함수 작업이 완료했을 때 실행할 callback을, reject는 에러가 발생했을 때 실행할 callback을 받습니다.

const p = new Promise((resolve, reject) => {
  // 비동기 작업
  // 성공하면 : resolve(value)
  // 실패하면 : reject(error)
});

예시 - fetch()

아래 코드는 서버에 특정 요청을 보내고 그 응답을 받는 fetch() 함수를 사용합니다.

fetch(links.requestToServer, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(this.sampleData),
}).then((res) => res.json())
  .then((res) => this.setClientSecret(res.clientSecret))

이 함수의 타입을 살펴보면, Promise<Response>를 반환값으로 받는 것을 볼 수 있습니다.

fetch는 일반적으로 오래 걸리는 작업입니다. 때문에 fetch 함수를 먼저 실행하되, 나중에 완료되면 Promise 객체에 넣어주는 방식으로 동작하는 것입니다.

Promise 해소

단, 이 Promise<Response> 타입의 변수는 Response 타입의 변수가 아니기 때문에,

정상적으로 사용하기 위해서는 특별한 구문으로 Promise를 해소해주어야 합니다.

const p = new Promise((resolve, reject) => {
  const success = false;
  
  // 비동기 함수 setTimeout()
  setTimeout(() => {
    if (success) resolve("성공");
    else reject("실패");
  }, 1000);
});

p.then(res => console.log(res))
 .catch(err => console.log(err));

JavaScript에는 Promise를 해소하기 위한 구문으로 async-await  / .then() / .all() 구문을 사용할 수 있습니다.

이 둘에 대해서는 이후에 좀 더 설명하겠습니다.

 

Promise 객체를 사용하면, 콜백을 사용할 때 보다 더 간단하고 직관적인 코드를 만들 수 있습니다.

하지만 Promise가 콜백보다 절대적으로 더 좋다고는 하지 않습니다.

Promise는 비동기 함수의 반환값을 활용해야 할 때 주로 사용되며, 그 외의 경우에는 여전히 콜백을 많이 사용합니다.