Async & await

async

• promise를 더 쉽고 가독성 좋게 만들어 줌
• 함수가 promise를 반환하도록 해줌

async function helloAsync() {
  return 'hello Async';
}

helloAsync().then((res) => {
	console.log(res) // 'hello Async'
})

위의 코드를 promise를 사용하여 setTimeout을 사용한다면?

function delay(ms) {
  return new Promis((res) => {
  	setTimeout(res, ms)
  })
}

async function helloAsync() {
  return delay(3000).then(() => {
    return 'hello Async';
  })
}

helloAsync().then((res) => {
	console.log(res) // 3초 후에 'hello Async'
})

await

위의 코드를 await를 사용하면?

function delay(ms) {
  return new Promis((res) => {
  	setTimeout(res, ms)
  })
}

async function helloAsync() {
  await delay(3000);  //간단해짐
  return 'hello Async';
}

helloAsync().then((res) => {
	console.log(res) // 3초 후에 'hello Async'
})

• await를 비동기함수 호출 앞에 사용해 주면 동기함수처럼 작동
  ( 비동기함수 delay가 끝나고 난 후 return 'hello Async'를 함 )
• async함수 안에서만 사용 가능

-> helloAsync()호출도 async로 바꾼다면?

function delay(ms) {
  return new Promis((res) => {
  	setTimeout(res, ms)
  })
}

async function helloAsync() {
  await delay(3000);  //간단해짐
  return 'hello Async';
}

async function main() {
	const res = await helloAsync();
 	console.log(res);
}

main();

1. main()호출
2. helloAsync()의 호출 (완료될때까지 밑의 코드는 진행 안함)
3. delay를 호출 (인수 : 3000)
4. delay로 setTimeout실행하여 3초 후에 실행 완료
5. helloAsync()의 그다음줄 코드인 return 'hello Async'를 실행
6. main()의 그다음줄 코드인 console.log(res)를 실행

---

json 데이터 가져오는 방법

async function getData() {
  	let rawResponse = await fetch('주소');
  	let jsonResponse = await rawResponse.json();
	console.log(jsonResponse);
}
getData();

async안에서 await을 사용하여 순차적으러 진행하도록 함

---

공부하며 정리&기록하는 ._. 씅로그