[🍦] 손님~ 진동벨로 알려드릴게요! (2) - async, await

비동기 1편 - promise

[🍦] 손님~ 진동벨로 알려드릴게요! (1) - promise

---

 

fetch는 비동기 함수이기 때문에 로직이 함께 시작해서 먼저 처리되는 것을 먼저 반환한다.

아래 예시 사진을 통해 직관적으로 이해할 수 있다.

 

 

예를 들어 일의 순서가 아래와 같다고 하자.

0. 시작한다고 알려주기

1. TMDB 정보 가져오기

2. TMDB 정보를 기반으로 UI 만들기

3. 완성됐다고 알려주기

 

이때, 일이 비동기적으로 처리되어서  2->3->1->0 의 순서로 진행되었다고 한다면 큰일이 날 것이다..ㅎㅎ

따라서 이처럼 일의 순서가 중요한 경우에는 async와 await를 사용하여 순차적으로 진행시킬 수 있다.

 

[await 1]

0. 시작한다고 알려주기

await 1. TMDB 정보 가져오기   =>비동기(10초)

2. TMDB 정보를 기반으로 UI 만들기 =>비동기(3초)

3. 완성됐다고 알려주기 => 비동기(2초)

처리 결과 : 0->1->3->2

 

[await 2]

0. 시작한다고 알려주기

await 1. TMDB 정보 가져오기   =>비동기(10초)

await 2. TMDB 정보를 기반으로 UI 만들기 =>비동기(3초)

3. 완성됐다고 알려주기 => 비동기(2초)

처리 결과 : 0->1->2->3

 

===> await를 붙인 일이 끝나기 전에는 절대 다음으로 넘어가지 않는다!

async & await

 

📍await : 기다리다

 

📍예제를 통해 알아보기

promise chaining으로 작성된 코드를 async, await로 바꿔보기

// 바꾸기 전
fetch("https://jsonplaceholder.typicode.com/posts")
	.then((response) => {
		return response.json();
	})
	.then((data) => {
		console.log(data)
	})

 

위의 예제를 바꿔보자.

 

1. .then을 날리고 await 를 앞에 붙인다.

await fetch("https://jsonplaceholder.typicode.com/posts")

 

2. .then의 콜백함수 파라미터에 들어가는 데이터를 변수로 받는다. 변수 이름은 마음대로

const response = await fetch("https://jsonplaceholder.typicode.com/posts")

 

3. .then을 날리고 이전의 return 에 있는 놈 앞에 await를 붙인다.

const response = await fetch("https://jsonplaceholder.typicode.com/posts")
await response.json();

 

4. 다음 .then의 콜백함수 파라미터에 들어가는 데이터를 변수로 받는다. 변수 이름은 마음대로

const response = await fetch("https://jsonplaceholder.typicode.com/posts");
const data = await response.json();

 

5. 일반적으로 await는 async 함수 안에서만 사용한다.

 (async 함수 아니어도 되긴 하나 일반적으로 함수 안에서 사용한다) → 우선은 async 함수 안에서만 사용한다고 이해하기.

async function getPosts() {
	const response = await fetch("https://jsonplaceholder.typicode.com/posts");
	const data = await response.json();
	console.log(data)
}

getPosts();

 

 

📍연습하기

 

문제 1.

아래 Promise chaining 방식을 async, await로 작성하세요.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });

정답

async function getPost() {
	const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
	const data = await response.json();
	console.log(data)
}

getPost();

 

문제 2.

아래 Promise chaining 방식을 async, await로 작성하세요.

fetch("https://jsonplaceholder.typicode.com/comments")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });

정답

async function getComments() {
	const response = await fetch("https://jsonplaceholder.typicode.com/comments")
	const data = await response.json();
	console.log(data)
}

getComments();