async await

비동기 함수를 동기적으로 활용해야 할 경우, await를 활용해야한다.

await를 활용하기 위해서는 함수 앞에 async를 붙여줘야 한다.

예를 들어, 기존에 데이터를 받아와 View를 생성하는 Init 함수가 있다고 치자. async를 이용하지 않는다면, 데이터를 전처리하는 preData, 데이터에 대한 view를 행성하는 createView 함수를 다음과 같이 실행해야 할 것이다.

function Init(url){
	axios.get(url)
		.then(res=>preData(res))
		.then(data=>createView(data))
}

그런데, 이런식으로 then이 자꾸만 늘어나게 된다면, 콜백 지옥처럼 가독성에도 안좋은 문제가 생긴다. 이를 방지하기 위해 awiat를 사용한다.

즉, '이게 완료 될 때 까지 기다리겠어요~'라는 뜻!

async function getData(url){
  const data = await axios.get(url).then(res=>res.data);
  const pretreatmentDatas=  await preData(data);
  createView(pretreatmetDatas);

이런 식의 활용이 가능하다.

주의점

await는 async안에서만 쓸 수 있다.

async 키워드 없이 await 를 사용하면 오류가 난다.

async의 리턴은 Promise객체다

async 키워드가 붙은 함수는, 리턴이 Promise객체로 둘러쌓여져서 된다.
즉, then을 사용해야 제대로 쓸 수 있다.

비동기로 실행될 수 있는 것들은 분류할 것 (중요)

이는 실무 팁이다.

 function fetchData1() {
            return new Promise((resolve, reject) => {
                setTimeout(() => resolve('data1'), 1000);
            });
        }
        function fetchData2() {
            return new Promise((resolve, reject) => {
                setTimeout(() => resolve('data2'), 1000);
            });
        }

        async function getAllData() {
            let data1 = await fetchData1();
            let data2 = await fetchData2();

            console.log(`${data1} - ${data2}`);
        }

각 1초 뒤 데이터를 반환하는 fetchData1 ,fetchData2함수가 있다고 치자.
getllAllData()함수는 fetchData1가 완료될 때 까지 기다리고, 이후 fetchData2가 실행이 완료될 때 까지 기다려야하므로, 함수 실행에 2초가 걸리는 불상사가 생긴다.

• 이처럼 위에 코드가 뒤에 코드의 실행을 막는 것을 블로킹이라고 한다.

하지만 먼저 실행시켜두고, 결과만 await로 받아두면 이를 해결할 수 있다.

//개선된 코드
 function fetchData1() {
            return new Promise((resolve, reject) => {
                setTimeout(() => resolve('data1'), 1000);
            });
        }
        function fetchData2() {
            return new Promise((resolve, reject) => {
                setTimeout(() => resolve('data2'), 1000);
            });
        }

        async function getAllData() {
          	
          let fetchData1Result =  fetchData1();
          let fetchData2Result =  fetchData2();
          	
          let data1= await fetchData1Result;
          let data2 = await fetchData2Result;
          	

            console.log(`${data1} - ${data2}`);
        }

이처럼 함수를 먼저 실행시켜두고, 이에 대한 결과만 따로 await로 받아두면, 함수를 실행하는데에 1초가 걸린다!
위에 코드가 뒤에 실행에 영향을 미치지 않으므로, 이를 non-blocking 방식이라고 한다.