[javascript] 동기 / 비동기 (aynce, await)

Async Await 패턴

비동기 코드를 동기식 코드처럼 작성할 수 있게 해주는 문법적인 구조로 이를 통해 비동기 작업을 더 직관적이고 가독성 좋게 다룰 수 있으며 

async 함수 : async 키워드를 사용하여 함수를 정의하면 해당 함수는 비동기 함수가 된다.
await 키워드 : awiat 키워드는 async 함수 내에서만 사용될 수 있으며 비동기 작업이 완료될 때까지 해당 라인에서의 코드 실행이 일시 중단된다. await 뒤에 오는 Promise가 성공적으로 이행되면, 해당 Promise의 결과 값을 반환
await 키워드는 꼭 Promise인스턴스가 반환되는 함수에서만 사용이 가능하다.

async 함수는 항상 Promise객체를 반환하며 await 키워드가 있는 부분에서 코드실행이 일시중단되어 비동기 작업이 완료되면 해당 값이나 결과가 반환되어 다음 코드가 실행된다.

const a = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(1);
      resolve();
    }, 1000);
  });
};

const b = () => console.log(2);

const wrap = async () => {
  await a();
  b();
};

wrap(); //1 2

 

영화 정보 가져오기 3. (async/await)

const getMovies = (moviName) => {
  return new Promise((resolve) => {
    fetch(`http://www.omdbapi.com/?apikey=7035c60c&s=${moviName}`)
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        resolve();
      });
  });
};

const wrap = async () => {
  await getMovies("frozen");
  console.log("겨울왕국");
  await getMovies("avengers");
  console.log("어벤저스!");
  await getMovies("avatar");
  console.log("아바타");
};

wrap();