JS Day 13 async / await

JS Day 13 async / await

1. aync

   • async / await은 ES8에서 추가되었다

   • async / await을 사용해서 promise를 간결하고 편리하게 사용할 수 있다(syntatic sugar~)
   • 함수 앞에 async를 붙이면 해당 함수는 프로미스를 반환한다

   const method = async () => {
       return value;
   }
   

   
   

2. await

   • await은 async가 붙은 함수에서만 쓸 수 있다
   • await이 붙으면 프로미스가 처리될 때까지 기다린다

   const method = async () => {
       return value;
   }
      
   let result = await method;
   

   • await은 top-level-code에서 작동하지 않는다 (익명 async로 한 번 감싸서 해결)

   const method = async () => {
       let response = await fetch(url);
   }
   

   
   

3. 비동기 로직

   • api 통신은 다음과 같은 구조를 띈다

   const getUser = async () => {
     try {
       let response = await axios.get('/user?id=12345');
     //const response = await fetch('/user?id=12345');
       
      //...비즈니스 로직 작성
            
     } catch (error) {
       console.error(error);
     }
   };
   

   
   

4. 비동기 병렬처리

   • 프로미스를 하나의 함수에서 여러번 호출하면 그 시간들의 합만큼 기다려야한다
   • 비동기 함수를 하나의 함수에서 동기적으로 사용하려면 ?
   • 프로미스가 생성되면 executor가 실행되는 속성을 이용

   async function x1() {
       await setTimeout(() => {},1000);
       return '1';
   }
      
   async function x2() {
       await setTimeout(() => {},1000);
       return '2';
   }
      
   const result = async() => {
       const x1Promise = x1();
       const x2Promise = x2();
       const x1Result = await x1Promise;
       const x2Result = await x2Promise;
       // executor가 각각 실행되어 1초만 기다리면 된다
       return x1Result + x2Result;
   }
   

   • 하지만 이 방법은 너무 번거롭고 코드만 길어질 뿐이다
   • Promise API의 all 메소드를 이용하면 이를 한방에 해결 가능하다

   function result() {
       return Promise.all([x1(),x2()])
       		.then(value => console.log(value));
   }
   // 각각의 값을 배열로 받아 ["1","2"]가 찍힌다 
   

   • Promise API의 all 이외에도 먼저 끝난 놈의 결과를 받아오는 race 등이 있다

참고 자료

JAVASCRIPT.INFO

드림코딩 by 엘리