[JavaScript 비동기] 타이머 API 실습

❗️공부 중인 사람의 글입니다

✅ TIL

• callback, Promise, async/await 구현 방법을 이해하기
• 개념이 잘 이해가 안 가서 아직 헤매는 중이다. 많이 써서 익숙해져야 할 것 같다...

delay / sleep

delay는 콜백함수에서 쓰이고 sleep은 promise에서 쓰인다.
해당 시간(ms) 이후에 기능을 수행한다.

Promise 객체 메서드

: new Promise()를 통해 생성한 Promise 인스턴스가 사용할 수 있는 메서드

1. Promise.prototype.then

: promise가 이행되었을 때 결과를 다룬다.
resolve / reject 케이스 각각을 다룬다.

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => reject(new Error("에러가 발생했습니다.")), 1000);
});

promise.then(
  result => alert(result), // 실행되지 않음
  error => alert(error) // 1초 후 에러 출력
);

2. Promise.prototype.catch

: promise의 reject 케이스만을 다룬다.

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => reject(new Error('에러가 발생했습니다.')), 1000);
});

promise.catch(alert); // 1초 후 에러 출력

//같은 기능을 하는 then 구문 (resolve, reject)
promise.then(null, alert)

Promise의 세 가지 상태

pending: 프로미스 실행 전 대기상태 (대기)
fulfilled: 성공적으로 완료된 상태 (이행)
rejected : 실패

async / await

: 비동기 함수를 동기함수처럼 작동하게 한다. promise 함수에서 사용하여 결과를 리턴한다.
await 키워드를 사용할 경우 promise 객체의 resolve 값이 출력된다.

비동기 함수 연습하기

더 좋은 방법이 있을 것 같지만 일단 오늘 내가 이해하고 친 건 이 정도이다...

1. 콜백함수

function delay(ms, callback) {
  setTimeout(callback, ms)
};
  
delay(3000, () => alert('3초 후 실행'));

2. promise

function delay(ms) {
  return new Promise(function(resolve, reject) {
      setTimeout(() => resolve(),ms);
  })
}

delay(3000).then(() => alert('3초 후 실행'));

3. async / await

const delay = async(ms) => {
  let sto = await new Promise(function(resolve, reject) {
    setTimeout(() => alert(), ms);
  })
  sto().then(() => alert('3초 후 실행'));
}

delay(3000)