Async / await

Promise가 콜백 지옥을 해결책이 될수 있지만 잘못 사용하면 Promise 지옥이 펼쳐진다. (then() 지옥)
async / await는 Promise가 해결해주는 콜백지옥을 더 간편하게 해결하도록 만들어준다.

Promise 사용

function fetchUser() {
  return new Promise((resolve, reject) => {
    // return `ellie`; // pending 
		resolve(`ellie`); // fulfilled 
		// reject(new Error(`error`)); // rejected 
  });
}

const user = fetchUser();
// console.log(user);
user.then(user => console.log(user));

async / await 비동기 처리

가장 최근에 나온 비동기 처리문법이다.
async를 사용하면 함수의 코드 블록이 자동적으로 Promise로 변환이 된다!

• await 는 async 함수 안에서만 동작한다.
• async / await는 비동기 코드를 동기 코드처럼 읽히게 해주어 코드 흐름을 이해하는 좋다.

비동기 로직들을 실행할 외부함수에 예약어 async을 붙여주고 내부 비동기 처리함수에 예약어 await를 붙여주면 된다.

예시
영화 API를 요청해서 가져오는 코드이다.

await는 resolve로 리턴해주는 값을 할당해준다.

    getMovies = async () => {
        const {
          data: {
            boxOfficeResult: {weeklyBoxOfficeList}
          }
        }
        = await axios.get(`https://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=f73424077cfe12471436e35f8633ace8&targetDt=${this.state.date}`)
        this.setState({weeklyBoxOfficeList, isLoading: false})
    }

async/await 은 Promise 와는 다르게 에러를 핸들링 할 수 있는 기능이 없다.
그래서 try , catch 문으로 에러를 처리해줘야 한다.

(...)
  try {
    const result = await promise;
    console.log(result);
  } catch (err) {
    console.error(err);
  }
})