async & await
: promise보다 더 간결하고 동기적인 처리를 하는 것처럼 보이도록 한다.
1. async
이전의 promise 방식은 resolve, reject과 같이 성공, 실패 수행결과를 나타내는
매개변수를 반드시 가지고 있어야 했다.
그러나 async방식으로 코드를 작성하면 다음과 같이 간편해진다.
console에서도 'fulfilled'로 잘나타났다.
2. await
await은 async 안에서만 사용이 가능하며 동기적인 처리과정처럼 보이게 한다.
getBanana함수의 promise방식과 async방식을 비교하면 확연히 코드 길이차이도 엿보인다.
3. promise방식도 콜백지옥처럼 맛볼 수 있다.
다음 코드를 확인 후 console창을 확인해보자.
console창에는 문제없이 결과가 잘 나오지만
문제는 이 promise 코드들도 자칫하면 콜백지옥처럼 보일 수 있다는 것이다.
따라서 async & await방식으로 코드를 바꿔보겠다.
console은 아까와 같이 결과가 동일하다. 그러나 코드는 한결 간결해졌다.
4. 에러처리하기
임의로 getApple함수에 error코드를 넣었다.
에러를 처리할 코드가 없기 때문에 console창에는 에러가 뜬다.
에러처리의 방법은 try catch구문을 활용하면 되겠다.
5. await 병렬처리
이 예제의 경우, 굳이 사과와 바나나가 순서대로 처리될 필요는 없다.
따라서 병렬처리하는 방법을 보자.
첫 번째 코드 작성법이다. 각각 사과와 바나나에 promise를 주는 방법이다.
두 번째는 Promise.all()이라는 api를 활용하는 방법이다.
훨씬 코드가 간결하면서 결과는 같다.
Promise.all() MDN
Array join MDN
이번에는 Promise.race()를 이용하여 가장 시간이 빠른 과일 하나만 출력해보도록 하겠다.
코드는 다음과 같다.
먼저 사과는 1초, 바나나는 2초로 두었다.
결과는 1초인 사과가 출력되었다.
ellie쌤 유투브 참고
자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | 프론트엔드 개발자 입문편 (JavaScript ES6)
