javascript async await

자바스크립트에서 비동기 함수를 동기 함수처럼 호출하려면 일반적으로 콜백함수를 사용합니다.

 

하지만 호출을 여러 번 사용하면 콜백 지옥에 빠질 수 있기 때문에 async와 await를 사용해야 합니다.

 

예제 코드

 

위의 예제 코드를 보게 되시면

 

fetch를 사용해 서버에 데이터를 요청하는 fetchTest1, fetchTest2 함수가 정의되고 있습니다.(12~18라인)

 

그리고 fetchTest1, fetchTest2를 await로 동기 처리하는 함수 asyncTest 함수가 정의되고 있습니다.(1~10라인)

 

await로 동기 처리하기 위해서는 먼저 asyncTest 함수 앞에 async 키워드가 있어야 합니다.(1~3라인)

 

fetchTest1, fetchTest2의 리턴값으로 Response 객체를 받아서 콘솔로 출력합니다.(5~6라인)

 

Response Body를 json으로 받은 다음에 콘솔로 출력합니다.(8~9라인)

 

여기서 then은 요청 결과가 성공이든 실패든 상관없이 콜백 되는 함수입니다.

 

이 코드를 실행하면 결과는 이렇게 출력됩니다.

 

예제 코드 실행 결과

 

404 에러가 떠도 then은 콜백 되는 것을 확인할 수 있습니다.

 

예제 코드 실행 결과

 

fetchTest1, fetchTest2가 동기(순차적으로) 호출되는 것을 확인할 수 있습니다.