async / await 알기 전 동기 비동기를 간단하게 알아보자
동기 : API 요청후 받을때 까지 기다린다
비동기 : API 요청후 기다리지 않고 다음 작업을 진행한다
만약 통신이 오래 걸리는 API가 있다고 가정해 보자
동기적으로 처리하면 해당 API가 끝날때 까지 다음 작업을 실행하지 못한다
이렇게 되면 만약 다음 작업이 웹페이지를 표시하는 코드들이 있다면 웹페이지가 매우 늦게 표시될것이다
그러면 비동기만 사용하면 되지 않을까??
그래서 외부 설치프로그램은 대부분 비동기 처리를 해두어서 실행시에 비동기로 실행된다
아래의 비동기 통신을 사용하여 데이터를 조회후 data변수에 담고 해당 변수를 console.log에 찍는 코드이다
function 함수이름() { const data = axios.get('https://koreanjson.com/posts/1') console.log(data) // Promise }
console.log에는 원하는 데이터가 아닌 Promise가 찍혔다
그 이유는 데이터를 요청후 아직 데이터를 받기도 전에 console.log를 찍어서 그런거다 이걸 해결하기 위해 사용하는게 async / await 이다
await 하기 위해서는 꼭 async도 함께 작성되어야 한다
async function 함수이름() { const data = await axios.get('https://koreanjson.com/posts/1') console.log(data) // {id: 1, title: "정당의 목적이나 활동이 ...", ...} }
await를 만나면 해당 코드가 완료되기 전에 다음으로 넘어가지 않는다
그럼으로 데이터가 정상적으로 나오는 것을 볼수 있다
