JS 비동기/동기 async + await 사용

1. 오늘 만난 에러

1. 비동기/동기의 활용하고싶음

- JS코드는 비동기 + 동기가 있을때 동기부터 실행됨

- 비동기 코드를 먼저 사용하기 위해서 사용하는 것 : async + await

- async function() { const result = await fecth(~~~)를 활용하기

 

2. 인자와 매개변수의 혼란

- function add(매개변수) { return 1;}  //매개변수: 문지기

- add(인자)  // 인자 : 손님

 

 

2. 접근방식 

1.  async function() {

 // 여기는 비동기 방식만 사용하는 줄 알았음 

 //(1) 필요한 데이터 (외부에서 가져오는 데이터 = fetch)만 비동기로 사용

 //(2) 그 후에 함수는 동기방식으로 사용하기 가능

}

- 함수를 쓰고 후에 함수를 호출해서 사용 => 즉시실행함수로 변경 : ( function() {} ) ();

 

3. 해결 실마리 찾기 & 해결

- 비동기 방식인 fetch를 async + await 를 활용하여 동기방식보다 먼저 실행되고 진행되도록 설계

//async + await

//fetch는 외부요청이니깐. 시간이 걸릴 수 밖에 없음.

//await : fetch답장 올때까지 무조건 기달려.

---

 

[JS기존 코드]

fetch(

  "https://api.themoviedb.org/3/movie/now_playing?language=ko-US&page=1",

  options

)

  .then((response) => response.json())

  .then((response) => {

    data = response.results;

    drawCard(data);

  })

  .catch((err) => console.error(err));

[ JS 변경 코드]

let data = {};

//즉시실행함수

(async function () {

  try {

    //데이터 가져오기

    const result1 = await fetch(

      "https://api.themoviedb.org/3/movie/now_playing?language=ko-US&page=1",

      options

    ).then((response) => response.json()); //response: fetch 결과

    data = result1.results;

    drawCard(result1.results);

    displayShow();

    review();

  } catch (error) {

    console.error(error);

  }

})();