[JavaScript] 비동기 호출에 대한 나의 생각

2022.11.23

💡 오늘의 JavaScript 공부

귀여운 고양이를 보며 비동기 호출에 관해 실습해보았다.

실습한 코드

📌 callback.js

const delay = (wait, callback) => {
  setTimeout(callback, wait);
}

📌 promise.js

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(resolve, wait);
  });
}

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('hello');
    }, wait);
  });
};
const sleep = (wait) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('에러'));
    }, wait);
  });
};
const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("hello");
    }, wait);
  });
};
// 하나씩만 남기고 모두 주석처리 하면서 실습

📌 script.js

function runPromise() {
  resetTitle();
  playVideo();

  sleep(1000)
    .then((param) => {
      console.log(param);
      pauseVideo();
      displayTitle();
      return "world";
    })
    .then((param) => {
      console.log(param);
      return sleep(5000);
    })
    .then(highlightTitle)
    .then(sleep.bind(null, 2000))
    .then(resetTitle)
    .catch(err => {
      console.log(err);
    })
}

💡Promise 실행 함수가 가지고 있는 두 개의 파라미터 resolve 와 reject 는 각각 무엇을 의미하나요?

 -> resolve는 비동기 실행이 제대로 동작했을 경우에 작동하는 것이고, reject는 비동기 실행중 에러가 발생했을 때에 작동하는 것이다.

💡new Promise( )를 통해 생성한 Promise 인스턴스에는 어떤 메소드가 존재하나요?

 -> Promise 인스턴스로는 .then과 .catch 가 있는데
.then은 비동기 실행이 제대로 동작했을 때 작동하는 resolve를 통해 받은 인자를 .then을 이용해 처리할 수 있다.
.catch는 비동기 실행이 제대로 작동하지 않았을때 동작하는 reject를 통해 받은 인자는 .catch를 이용해 처리할 수 있다.

💡Promise.prototype.then 메소드는 무엇을 리턴하나요?

-> resolve의 값

💡Promise.prototype.catch 메소드는 무엇을 리턴하나요?

-> reject의 값 

💡Promise의 세 가지 상태는 각각 무엇이며, 어떤 의미를 가지나요?

-> Promise의 세 가지 상태
1. 대기 : 실행도 대기도 되지 않은 상태
2. 실행 : 함수의 실행이 성공해 resolve의 값이 실행
3. 실패 : 함수의 실행이 실패해 reject의 값이 실행 

💡await 키워드 다음에 등장하는 함수 실행은 어떤 타입을 리턴할 경우에만 의미가 있나요?

-> promise 타입 

💡await 키워드를 사용할 경우 어떤 값이 리턴되나요?

-> Promise의 값 

💡브라우저 개발자 도구의 콘솔을 열어 다음을 실행해 본 후, returnValue에 담긴 값을 확인해 보세요.

 -> hello