[프로젝트] async??

FE-BE통신을 할때, BE분들이 fetch 를 사용할때 async라는것을 자주 이용하는것을 보았다.
설명을 들었는데 애매하게 이해해서 구글링
내가 이해한 바로는 async === promise를 간편하게 사용할 수 있는것이다.

---

💡 자바스크립트엔진은 기본적으로 코드를 동기적으로 수행한다.

아래 코드의 경우:

function fetchdata(){
// 이것은 데이터를 가져오는데 10초걸리는 함수
return data
}

const getdata = fetchdata() // 호출하고
console.log(getdata) //원하는 기능을 실행

▶️ 처리순서

1. fetchdata함수를 실행하며 10초가 지남 →

2. 그제서야 다음줄로 넘어가며 data를 리턴 →

3. 리턴된 data가 getdata변수에 할당이되고 →

4. 콘솔로그에 찍힘

⇒ 오래걸림

---

💡 그러므로 promise로 비동기처리를 해주어야함

Promise란?

▶️ 컴터💬 : 데이터를 받아올건데 언제 다받아 올지는 모르겠어. 하지만 니가 promise객체를 가지고 then이라는 콜백함수만 등록해 놓으면 데이터 준비되는대로 등록된 콜백함수를 불러줄게 다른거 하고있어.
(드림코딩 유튜브 최고....)

function fetchdata(){
// 이것은 데이터를 가져오는데 10초걸리는 함수
//promise를 활용해서 비동기처리  
return new Promise((resolve,reject)=>{
resolve(data)})
}

const getdata = fetchdata() // promise를 리턴하기 때문에
getdata.then(console.log) // data가들어오면 콘솔로그에 출력!

---

💡 하지만 이것보다 더 간편하게 사용할 수 있는것이 async

▶️ 함수 앞에 async만 붙여주면된다.

async function fetchdata(){
// 번거롭게 promise를 쓰지 않아도 자동적으로 함수 안에있는 코드 블럭들이 프로미스로 변환됨
return new Promise((resolve,reject)=>{
resolve(data)})
}

const getdata = fetchdata() // promise를 리턴하기 때문에
getdata.then(console.log) // data가들어오면 콘솔로그에 출력!