async / await

promise를 이용한 코드

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

const start = () => {
    delay(2000).then(() => {
        console.log("대기");
    });
};

start();

• 위 코드는 delay 함수의 인수로는 2000을 넘겨 2초 동안 지연하게 해주고, then 메서드를 사용해, "대기" 라는 단어를 출력

async / await

1. async

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

const start = async () => {
  // delay(2000).then(() => {
  //     console.log("대기");
  // });
  return "대기";
};

start().then((res) => {
  console.log(res);
});

• async를 붙이면, promise객체를 반환하는 비동기처리 함수가 됨
• return문의 값이 resolve의 결과값으로 전달됨

2. await

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

const start = async () => {
    await delay(2000);
    console.log("대기");

};

start()

• async가 붙어있는 함수의 내부에서만 사용이 가능
• 해당 promise가 처리 완료될때 까지(=delay함수가 처리 완료될때까지)기다린다음 결과값을 받을 수 있음
• 아래에 있는 코드들은 실행되지 않음

에러핸들링

• async 와 await 를 이용한 비동기 처리 함수에서는 try catch 문법을 이용해 예외처리
• try 블록 안에는 함수에서 실행해야 할 코드를 작성
• try의 블록 안에 작성된 코드가 실행되고, 해당 코드에서 에러가 발생한다면, 아래에 작성할 catch 블록 안의 코드가 실행

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

const start = async () => {
    try {
        await delay(2000);
        console.log("대기");
    } catch (error) {
        console.log(error);
    }
};

start();