[Section04-01] rest-get

동기와 비동기

 

비동기

요청들이 서로 기다릴 필요가 없을때 사용

(동시에 여러 일 할때)

예를들어 게시물 목록 가져오기 / 상품 목록 가져오기

 

javascript => 기본적으로 동기적으로 작동함

axios 등의 외부 설치 프로그램 => 비동기적으로 작동

 

Rest-api : postman, swagger

graphql-api : playground

 

 

동기

기다리면서 순서대로 해야할 경우

(글 등록 -> 글 등록 완료 -> 글 불러오기)

 

 

 

---

vscode 에서 비동기

const data = axios.get('https://koreanjson.com/posts/1')
console.log(data) // Promise

결과가 Promise 로 나오는 이유??

=> 약속만 받은것이기 때문에

 

비동기로 작동하기 때문에 axios.get 백엔드에 요청을 하고 바로 다음줄 코드로 넘어감

바로 다음줄인 console.log 에는 data가 들어오기 전에 진행이 되므로

Promise(받아올것이라는 약속)만 나오게 됨

 

그럼 어떻게 해야할까?

=> axios 앞에 await 라는 명령어를 붙여주면 다음줄로 진행이 되지 않다가

data를 다 받아오면 그 다음줄이 실행이 된다.

그리고 await 는 무조건 따라다니는 짝궁이 있음. => async

 

---

axios / async

 

어떻게 쓰는가?

async function 함수이름() {
	const data = await axios.get('https://koreanjson.com/posts/1')
	console.log(data) // {id" 1, title: "제목", co...
}