3.4 프로미스와 async/await

3.4.1 프로미스

Promise라는 클래스를 사용하는 문법, new는 붙여 Promise 클래스를 호출하면 프로미스 객체를 생성하는데, 이때 인수로 콜백 함수를 넣는다. 콜백 함수이 매개변수로 resolve()와 reject()함수가 있다. 콜백 함수 내부에서는 resolve()나 reject() 함수 둥 중에 하나는 호출해야 한다. resolve() 함수를 호출하면 프로미스가 성공한 것이고, reject()를 호출하면 프로미스가 실패한 것, 둘 다 호출하면 먼저 호출한 함수만 유효하다.

const <프로미스 객체> = new Promise ((resolve, reject) => {
resolve(); //프로미스 성공
//또는
reject(); //프로미스 실패
}

프로미스 객체에는 then() 메서드나 catch() 메서드를 붙일 수 있다.

<프로미스 객체>.then(<콜백 함수>);
//또는
<프로미스 객체>.catch(<콜백 함수>);

두 메서드도 인수로 콜백 함수를 넣는다. then()의 콜백 함수는 resolve() 함수를 호출할때 실행되고, catch()의 콜백 함수는 reject() 함수를 호출할 때 실행된다.
resolve()의 인수로 전달한 값은 then() 콜백 함수의 매개변수로 전달되고, reject()의 인수로 전달한 값은 catch() 콜백 함수의 매개변수로 전달된다.

const p1 = new Promise((resolve, reject) => {
	resolve('success');
});
p1.then((data) => console.log(data)); //success
const p2 = new Promise((resolve, reject) => {
  reject('error');
});
p2.catch((error) => console.log(error)); //error

reject()를 호출했는데 catch() 메서드를 붙이지 않으면 에러가 발생한다.

const setTimeoutPromise = (ms) => new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
});
setTimeoutPromise(3000).then(() => {
    console.log('3초 뒤에 실행');
});

setTimeoutPromise()는 setTimeout() 함수에 필요한 ms를 인수로 받는 고차 함수

프로미스 : 실행된 결과 값을 저장하고 있으며 언제든지 필요할 때 그 값을 꺼낼수 있는 객체

setTimeout()과 같은 비동기 코드는 콜백 함수가 setTimeout()과 딱 불어 있어서 콜백 함수의 위치를 변경할 수가 없었다. 하지만 프로미스로 만들면 필요할 때 then()을 호출할 수 있어서 편리하다.

const promise = setTimeoutPromise(0);
promise
    .then(() => {
        return 'a';
    })
.then((data) => {
    console.log(data);
    return 'b';
})
.then((data) => {
    console.log(data);
});

<a
<b

앞선 then() 콜백 함수의 반환한 값이 다음 then() 콜백 함수의 매개 변수로 전달된다.
만약 반환 값이 프로미스라면 resolve() 한 값이 다음 then() 콜백 함수의 매개변수로 전달된다.

프로미스에는 finally() 메서드도 있다. then()과 catch()의 실행이 끝난 후에 finally()가 있으면 무조건 실행된다.

const promise = setTimeoutPromise(0);
promise
    .then(() => {
        console.log('0초 뒤에 실행');
    })
.catch((err) => {
    console.log('에러 발생 시 실행');
})
.finally((err) => {
    console.log('성공이든 실패든 무조건 실행');
});

< 0초 뒤에 실행
< 성공이든 실패든 무조건 실행

3.4.2 async/await

await는 프로미스가 resolve()할 때 까지 기다리라는 뜻. await을 사용하면 프로미스인 비동기 코드를 순서대로 실핼하게 만들 수 있습니다.

• 함수 내부에서 await을 사용하려고 하면 에러가 발생한다.
• await는 async 함수에서 사용할 수 있다.
• function 예약어 앞에 async를 붙이면 전환된다.
• 화살표 함수도 앞에 async를 붙여 async 함수로 만들수 있다.

3.4.3 try-catch 문으로 에러 처리하기

await 에러 처리는 try-catch문으로 감싸 줘야 한다. 그러면 reject()의 인수로 넣었던 값이 catch 문의 error로 전달된다.

const p1 = new Promise((resolve, reject) => {
    reject('에러');
});
try{
    await p1;
}catch (error){
    console.log(error);
}

< 에러