[JS] 비동기3 | async, await

async, await 

asynchonous인 Promise를 좀 더 간결하게 만들어 

synchronous인 것처럼 만들어주는 API 이자 Syntactic Sugar이다.

모든 경우 async, await이 좋은 게 아니라 Promise를 써야 좋은 경우도 있긴하다.

 

Syntactic Sugar

새로운 코드가 아니라 기존의 코드를 좀 더 간편하게 쓸 수 있게 하는 코드를 말한다.

ex) class: proto 타입을 더 보기 편하게 만들어 주는 역할

 

 

---

 

백엔드에서 네트워크와 연결해 오기 까지 10초정도 걸리는 함수가 있다고 가정해 보자. 

실행 되었을 때  'Jane' 유저의 이름을 반환해 준다. 

 

 

함수를 호출하고 콘솔에서 출력을 해보자 

 

 

 

이렇게 동기적으로 처리를 하면 네트워크에 연결되는 10초 동안 

다음 코드는 실행되지 않아, 유저는 빈 화면만 10초를 보고 있어야 한다. 

 

 

 

 

이렇게 시간이 오래 걸리는 작업은 비동기적으로 처리해줘야한다. 

 

1. Promise로 사용하는 방법 

첫 번째로는 Promise를 사용해서 비동기 처리할 수 있다.

 

resolve, reject를 호출하지 않으면 계속 pending 상태로 남아 있게 된다. 

 

 

그래서 꼭 resolve 또는 reject 을 함수 안에서 호출을 해야한다. 

 

 

 

2. async 

async라는 키워드를 붙여주면 된다. 

Promise를 쓰지 않아도 자동으로 Promise로 변환해준다. 

 

 

 

3. await 

await은 async 함수 안에서만 쓸 수 있다. 

await에 적어진 내용이 실행되기를 기다렸다가

내용을 return을 한다. 

line 1: delay 함수는 Promise를 호출하였다.

ms 들어온 시간 만큼 setTime 했다가 resolve를 리턴해 주었다.

 

Line 6: await은 delay 함수가 끝날 때까지 기다렸다가 사과 리턴하는 Promise를 만든다. 

 

 

 

await 대신 then을 사용한 경우 

 

.then을 사용했을 시 

 

사과 키위 몇 초 있다 출력하기 

 

 

 

.then을 써서 작성하니 콜백 지옥처럼 코드가 복잡해졌다.

 

 

then 대신 await을 사용한 경우 

await을 이용해 보자.

좀 더 간편하게 정리되었다. 

 

 

 

await 병렬 처리 

사과 1초 후에 키위 2초가 걸려 호출이 되는데 

이렇게 순차적으로 진행하면 비효율적이다.

서로 연관이 없기에 기다릴 필요가 없다. 

 

이 문제를 해결하기 위해 Promise를 만들어 쓸 수 있다. 

 

 

 

Promise.all 

하지만 위의 코드도 병렬적으로 너무 길다. 

Promise에서 제공하는 .all을 사용하면 간단히 쓸 수 있다. 

 

 

Promise.race 

뭐든 첫 번째 빨리 나오는 과일을 받아오고 싶을 때

.race를 사용하면 편하다

 

사과만 나온 것을 볼 수 있다. 

 

-- 출처 --

https://youtu.be/aoQSOZfz3vQ

 

 

---

asynchronous event를 handling 하는 2 가지 방법 

 

response를 사용하는 경우 

 

aconsole

 

 

async, await 사용하는 경우 

 

 

 

 

Error handling 

response는 catch로 전체 에러 확인 

 

 

async, await

try 안으로 실행할 내용 옮기기 

catch에 에러 등록 

 

 

 

 

fetch url 주소에 일부러 글자를 지워보았다.

 

에러가 뜨는 것을 볼 수 있다.