[JS] Syntax | 06. Promise

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

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

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

 

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

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))

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

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

fetch는 일반적으로 오래 걸리는 작업입니다.

때문에 fetch 함수를 먼저 실행하되, 나중에 완료되면 promise 객체에 넣어주는 방식으로 동작하는 것입니다.

 

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

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

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

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

 

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

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

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