[Javascript] async와 await

0. async와 await

$.ajax 나 fetch을 사용해 비동기 통신을 할 때 비동기라는 특성 때문에 코드가 순서대로 작동하지 않는 경우가 있다. 이런 비동기 통신을 동기적으로 즉, 순서대로 처리하기 위해 사용할 수 있는 것이 async와 await 이다.

 

 

1. 기존의 코드

async와 await를 사용하지 않는 경우를 보자.

 

fetch를 사용해 서버와 비동기 통신을 하고 있고 그 응답 데이터 response 라는 변수에 담는다. 하지만 비동기 통신의 특성상 응답이 오기도 전에 아래의 response.text() 가 실행되어 'Uncaught TypeError : response.text is not a function' 에러가 발생한다.

 

function submit (){
    let response = fetch('/test', {
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json;charset=utf-8'
        },
        body : JSON.stringify({
            'testNum' : 'Test101'
        })
    });
    
    let text = response.text();
    console.log(text);
}

 

 

이를 해결하기 위해 함수에는 async 키워드를, 동기적으로 처리할 내용에 awiat 키워드를 사용한다. fetch에 await가 붙어있기 때문에 fetch에서 응답 데이터를 response 변수에 대입하기 전까지 다음 코드로 진행하지 않는다.

 

response.text() 에도 await가 붙어있기 때문에 fetch의 통신이 끝난 후에 작동하여 응답 데이터를 텍스트로 처리할 수 있게 된다. 만약 response.text()에 await이 없다면, 적절한 타이밍에 텍스트 처리를 하지 못하여 콘솔에는 프로미스(promise) 타입의 객체가 출력될 것이다.

 

async function submit (){
    let response = await fetch('/test', {
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json;charset=utf-8'
        },
        body : JSON.stringify({
            'testNum' : 'Test101'
        })
    });
    
    let text = await response.text();
    console.log(text);
}