Promise / async & await

Promise 는 데이터를 주고받는 약속이다.

 

[ promise 의 3가지 상태 ]

1.  pending (요청중) - 요청을 한 상태

2.  fulfilled (성공) - 완료됨

3.  rejected (실패)

 

우리가 코드에서 비동기 관련 처리를 한다.  =  'promise' 객체를 이용하여 코딩을 한다.

[ promise 를 핸들링 할 수 있는 방법 중 큰 2가지 ]

1.  then,  catch

2.  async,  await

 

■  fetch

의미 : 알을 품다.

외부로부터 데이터를 가져와서 품고있는 것 = 데이터를 외부로부터 요청하는 것

 

■  async,  await

 

* JSON Placeholder 로 test 해보기

// await 을 가지고 있는 함수를 가지기 위해서는 그 함수 앞에 async 가 있어야 한다.
async function printTest() {
 // try ~ catch 블록 : 이 블록 안에서 문제 발생 시 catch 로 넘어간다!
  try {
      // fetch 는 비동기적으로 동작해서 값을 불러오는데 시간이 좀 걸리므로 await이 밑으로 안내려가도록 기다려줘야 함
        const result = await fetch("https://jsonplaceholder.typicode.com/users"); 

     // .json 은 promise 를 반환하기 때문에 비동기적으로 동작함을 알 수 있음, 따라서 await 으로 기다려줘야 함
     // = fulfilled 를 반환할 때 까지 콘솔로그에 못가게 await 이 멱살잡고 기다리는 중   
        const users = await result.json();
        console.log(users);

      // fetch 는 성공할수도, 실패할수도 있는 작업 -> 제어권이 나에게 없다.
      // 따라서 오류를 체크할 수 있는 단계를 catch 로 해줌!
      } catch (error) {
        console.log(error);
    }
 }

 

* 정보를 주고 받을 때는 JSON 이라는 형태로 받아온다.

   JSON 형식은 JS 객체랑 비슷한 형태이지만 JS 객체는 아니므로 자바스크립트가 읽어줄 수 있도록 .json 을 하여 문서화 해줘야 한다.

* fetch, json 모두 promise 를 반환하고 비동기적으로 동작하기 때문에 await 으로 기다려줘야 한다.

* fetch와 .json 은 항상 같이 사용한다!

 

* async await try catch 로 비동기를 동기적으로 할 수 있게 해준다.

   but 모든 로직마다 await 을 해줬을 때 무거운 작업일 경우 비동기가 나을 수도 있지만,

   지금 우리가 체감할 정도는 안되니까 fetch 를 할때 await 을 하자!!