자바스크립트 Promise, async, await 정리

1. Promise

• Promise 생성자 함수는 비동기 요청을 처리하는 방법 중 하나인데요. 실행은 되었지만 결과를 아직 반환하지 않은 객체를 의미합니다.
  • 비동기 처리를 수행할 콜백 함수를 인수로 받습니다.
  • 콜백 함수는 resolve와 reject 함수를 인수로 받습니다.
  • 성공 또는 실패 하나의 결과만 반환됩니다.

const promise = new Promise((reslove, rejcet) => {
    if (/*비동기 처리 성공*/{
        resolve('value');
    } else { /*비동기 처리 실패*/
        reject(new Error("..."));
    }
});

2. async/await

• async와 await는 프로미스를 보다 쉽게 구현하는 방법입니다.
• 프로미스의 then, catch, finally를 사용하지 않고 비동기를 처리할 수 있습니다.

2-1. async

• 다음과 같이 함수 앞에 async 키워드를 적어줍니다.
• async 함수는 언제나 프로미스를 반환합니다(반환값을 resolve하는 프로미스)

async function foo(n) { return n; }
foo(1).then(v => console.log(v)); // 1

const bar = async function (n) { return n; }
bar(2).then(v => console.log(v)); // 2

const baz = async n => n;
bar(3).then(v => console.log(v)); // 3

const obj = {
  async foo(n) { return n; }
};
obj.foo(4).then(v => console.log(v)); //4

class MyClass {
      async bar(n) { return n; }
}
const myClass = new MyClass();
myClass.bar(5).then(v => console.log(v)); // 5

• 첫 번째 함수는 아래와 동일합니다. async는 언제나 프로미스를 리턴하는 것이 핵심!

async function f() {
    return Promise.resolve(1);
}

f().then(v => console.log(v)); // 1

2-2. await

• await는 프로미스가 settled(비동기 처리가 진행된 상태) 상태가 될 때까지 기다리다 resolve한 결과를 반환합니다.
• await는 반드시 프로미스 앞에서 사용해야 하며 일반 함수에서는 사용할 수 없습니다.

const getUserInfo = async id => {
    const res = await fetch(`https://user.info.com/${id}`);
    const { name } = await res.json();
    console.log(name); // Hwi Jeong
};

getUserInfo('jeong')

• 위 코드의 작동 방식을 살펴보자면 1) fetch 함수가 HTTP 요청을 진행하고 반환한 프로미스가 settled 될 때까지 대기합니다. 2) settled 상태가 됐다면 프로미스가 resolve한 결과가 res에 할당됩니다.
• 정리하자면 프로미스 앞에서 await를 붙이면 이전 함수가 settled된 차례로 다음 함수가 실행됩니다!

3. 에러 처리

• async 및 await에서는 try와 catch를 사용하여 에러를 처리할 수 있습니다.

const foo = async () => {
    try {
        const errorUrl = 'https://error';

        const response = await fetch(errorUrl);
        const data = await response.json();
        console.log(data);
    } catch (err) {
        console.error(err); // TypeError: Failed to fetch
    }
}

참고 자료

• https://javascript.info/async
• https://javascript.info/async-await