VSCODE 에서 API 요청하기

동기와 비동기

API 요청을 보내고 응답을 받을때 까지
기다리자 = 동기
기다리지 말자 = 비동기

비동기의 경우 등록하기 버튼을 누르고 완료까지 기다리지 않고 바로 조회하기를 눌러서
오류가 발생하는 경우가 있음.

동기의 경우는 그런 오류는 없지만 시간이 좀 더 걸릴 수 있음.

비동기는 서로 기다릴 필요가 없는 경우에 주로 사용함.
동시에 여러일을 할 때 사용.

동기

비동기

VSCODE 에서 비동기

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

데이터를 외부에서 받아오는 경우 대부분이 비동기임.

비동기를 동기로 바꿔주는 명령어

async / awiat

function 함수이름() {
  const data = axios.get('https://koreanjson.com/posts/1')
  console.log(data) // promise
}

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

위쪽 코드가 비동기 통신이고 그 코드를 동기 코드로 변환한것이 아래쪽 코드
위쪽은 요청과동시에 data에 저장하지만
아래쪽은 await가 바로 저장하지 못하게 막아줌. - 다 받고 오면 그제서야 저장하게 해줌.