[JS] ES6 : async와 await을 통한 동기처리를 해보자. ( setTimeout )

 

이번에 promise를 공부할까 하다가 async와 await을 먼저 공부하게 되서 이렇게 공부한다. 계속 거꾸로 가는 느낌..

우선 아래와 같은 코드가 있다고 해보자. ( async와 await만 볼 사람은 바로 아래로 내려가도록 하자. )

 

 

샘플코드1

<script>
    console.log('console : 1 ');
    console.log('console : 2 ');
    console.log('console : 3 ');
    console.log('console : 4 ');
</script>

 

javascript는 동기적인 언어이기 때문에 한줄한줄 순서대로 실행이 될 것이다. 그럼 아래와 같은 결과가 나온다.

 

결과

 

그럼 또 하나의 샘플코드를 보자. API통신을 했다고 생각하고 setTimeOut을 줬다..

 

 

샘플코드2

<script>
    console.log('console : 1 ');
    setTimeout(() => {
        console.log('console : 2 ');
    }, 2000); 
    setTimeout(() => {
        console.log('console : 3 ');
    }, 4000); 
    console.log('console : 4 ');
</script>

 

아까도 말했듯 javascript는 동기적인 언어이기 때문에, 한줄한줄 실행이 된다. 그럼 결과는 어떻게 될까?

아래와 같이 실행된다.

 

결과

 

동기지만, 비동기인 것처럼 실행이 되었다. 이렇게 보면 별 문제 아니겠지 라고 생각할 수 있지만, 실제

API통신을 통해 가져온 데이터를 넣어서 사용해야 하는데, 데이터를 가져오기 전에 다음 코드가 실행되면?

바로 에러가 떨어진다... 예를 들면 아래와 같이.. ( 아래는 그냥 API예시를 들었을 뿐이다 )

 

샘플코드3

<script>
    let data = '';
    setTimeout(() => {
        data = 'add Data';
    }, 2000); 
    console.log('데이터를 가져왔습니까? : ' + data);
</script>

 

결과

 

데이터를 넣어주기전에 데이터를 콘솔에 출력하니, 당연히 안나온다.. 그렇기 때문에 필요한 게 동기처리인데

그럴 때 쓰는게 async와 await이다. 그럼 바로 알아보자.

 

 

 

async Function

============================================================================

 

Promise처럼 비동기 작업을 처리할 때 사용하는 함수로 Promise보다 조금 더 간결하게 처리 할 수 있다는

장점이 있다. async 키워드를 함수 앞에 붙이는 것만으로 해당 함수는 Promise 객체를 리턴하게 된다.

 

기본문법

async function 함수명(){
	........
}

 

await

============================================================================

await은 async키워드가 붙은 함수내에서만 사용 가능한 키워드로, 비동기 처리 함수 ( ex : fetch )를 동기적으로

수행하도록 한다.

 

기본문법

async function 함수명(){
	await testFunc();
    .....
}

 

그럼 실제로 asycn와 await을 통해서 동기처리를 어떻게 하는 지 보도록 하자.

 

setTimeout을 활용한 비동기처리 함수를 동기처리로

<script>
    function delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function asyncFunc(){
        await delay(4000);
        console.log('console : 4 ');
        await delay(1000);
        console.log('console : 1 ');
    };

    asyncFunc();
</script>

 

delay라는 setTimeout함수를 적용한 Promise함수를 만들어주고... asyncFunc이라는 함수를 만들어 주었다.

해당 함수는 async키워드를 적용하고 await도 사용해줬다. 결과는 아래와 같다.

 

동기처리 됨

 

보면 4초를 기다려야 하는 4를 먼저 찍어준 뒤, 1초 후 1을 찍어주는 것을 볼 수 있다.

 

 

실제 API통신에서 async와 await은 아래처럼 활용할 수 있다.

async search  () {
    const response = await fetch(newUrl); // 비동기통신
    const json = await response.json(); // .json함수로 데이터 정제
    this.data = json.items; // 데이터 적재
}