비동기, 동기 + axios

비동기, 동기

비동기와 동기는 원래 통신과 관련된 용어입니다.
프론트엔드에서 서버와 통신할 때 서버의 응답까지 처리시간이 얼마나 걸릴지,
우리가 데이터를 언제 받을 수 있을 지 알 수 없습니다.
따라서 비동기적인 작업을 해야할 경우가 생깁니다.

동기	이전 작업이 끝난 후, 다음 작업을 순차적으로 실행한다.
비동기	이전 작업 수행 중이어도, 다른 작업을 실행할 수 있다.

---

이미지 예시

• 동기와 비동기
  

• Promise, async, aswait등의 함수를 사용하면…
  

---

Promise 객체

비동기 작업이 언제 끝나는지 알려주는 객체.

• 비동기 작업이 끝난 후, 결과를 알려주는 용도로 사용한다.
  • 비동기 작업이 끝난 시점을 사용해 동기 작업처럼 구성할 수 있다.
• 상태: 대기(작업 전) / 이행(작업 후) / 거부(에러, 실패)
• 예시) than, catch

const promise = // Promise를 반환하는 작업

promise.then((result)=>{
	console.log("작업 성공: "+result)
}).catch((err)=>{
	console.log("작업실패: "+err)
})

Async & Await

해당 비동기 작업이 결과를 낼 때까지 기다린다.

1. 특정 함수를 비동기화 한다.
   • await한 함수만 일시 정지된다.
   • 예시) axios 통신
     • 데이터를 가져올 때까지 기다린 후 ⇒ 구조분해할당으로 result에 data를 넣는다.

const getData = async function(){
	const {data : result} = /* 여기 멈춰! */ await axios.get("서버 주소");
	return result;
}
// Promise 객체 반환

2. async를 붙이면 Promise객체를 반환한다.
3. async로 처리한 비동기 함수를 다른 곳에서 사용할 때는
   다시 await으로 처리한다.
   

<div onClick = { 
    async()=> console.log(/* 기다리기 */await getData();)
}></div>