Promise/Callback 에 관한 고찰

Promise?

Promise는 비동기 작업의 완료 후 결과값을 나중에 처리할 수 있도록 해주는 객체다.

Promise는 처음에는 'pending(대기)' 상태이고, 작업이 완료되면 'fulfilled(이행)' 됐는지 'rejected(거부)' 됐는지의 상태를 가진다.

Callback?

Callback 함수는 다른 함수에 인자로 넘겨주어, 그 함수가 실행을 끝낸 후 실행되는 함수를 말한다. 비동기 처리에 많이 사용되며, 특정 코드의 실행이 끝난 후 필요한 다음 작업을 지정할 때 유용하다. 

WHY?

자바스크립트에서 비동기 처리를 왜 해야할까?
비동기 처리는 웹사이트 개발 시 백엔드 서버와의 통신 속도를 빠르게 해주는 효과가 있다.

또한 동기식 코드로는 구현하기 어려운 복잡한 작업들을 쉽게 해결할 수 있다는 장점이 있다.

promise 동작

예제는 new Promise를 통해 Promise 객체를 생성. 비동기 작업에 성공하면 resolve를 호출하고, 실패하면 reject를 호출한다.

그리고 이행 결과 또는 거부 사유를 다루기 위해 then 메소드를 사용했다.

let promise = new Promise(function(resolve, reject) {
  // 비동기 작업 수행

  if (/* 비동기 작업 성공 */) {
    resolve(value); // 작업을 성공적으로 끝내면 resolve를 호출
  } else {
    reject(error); // 실패하면 reject를 호출
  }
});

// then을 사용하여 resolve됐을 때의 처리를 작성
promise.then(
  result => { /* 성공 처리 */ },
  error => { /* 오류 처리 */ }
);

callback 동작

// 비동기적으로 파일을 읽는 함수 예제
function readFile(path, callback) {
  // 파일 읽기 작업
  setTimeout(() => {
    let result = "파일 내용"; // 가정된 파일 내용
    callback(result); // 콜백 함수를 호출합니다.
  }, 1000);
}

// readFile 함수 사용 예
readFile('/path/to/file', function(result) {
  console.log(result); // 콘솔에 출력
});

위 예제에서는 readFile 함수를 비동기적으로 구현하여, 파일 읽기 작업이 완료된 후 콜백 함수를 호출.

콜백 함수내에서는 파일의 내용을 처리할 수 있다.

promise 와 async/await 의 관계

async/await 키워드를 사용하면 pending 된 모든 스레드를 중지시키고 await 을 먼저 실행시킨다.

그리고 나서 마지막으로 callback 함수를 실행시켜준다.

이렇게 되면 나중에 특정 시점에 종료시킬 때 유용하게 사용할 수 있다.

ex)

// 비동기 함수를 선언할 때 async 키워드를 사용.
async function fetchUserData(userId) {
  // await 키워드를 사용해서 비동기 처리가 필요한 영역을 지정.
  // 이 부분에서는 서버에서 데이터를 가져오는 비동기 작업이 진행.
  // 가져온 데이터는 response 변수에 저장.
  let response = await fetch('https://api.example.com/users/' + userId);

  if (response.ok) { // 응답이 정상인 경우
    let data = await response.json(); // JSON을 파싱하고, 결과값을 data에 저장.
    return data; // 가져온 데이터를 반환.
  } else {
    throw new Error('데이터를 불러오는데 실패. :('); // 오류캐치
  }
}

// async 함수는 프라미스를 반환하므로, then을 사용하여 결과를 처리
fetchUserData('123')
  .then(userData => console.log(userData))
  .catch(error => console.error(error));