[Javascript] Promise와 Async / Await

[Javascript] Promise와 Async / Await

반응형

Promise

우리가 API를 처리할 때나 fetch()로 데이터를 불러올 때,

비동기 작업을 하게 된다

그 때 Promise는 비동기 작업을 기반으로,

pending 상태에서 ~ 결과값인 resolve / reject를 가져온다

관련 메소드들로 동기 메소드처럼 값을 반환할 수 있고,

미래의 어떤 시점에 결과를 제공한다

const promiseVar = new Promise((resolve, reject) => ( setTimeout(resolve, 3000, "Yes u r") // (handler, timeout, argument) )); promiseVar .then(result => console.log(result)) // resolve 되면 실행 .catch(error => console.log(error)) // reject 되면 실행 .finally(() => console.log("I'm done")); // 마지막에 실행

체이닝

promiseVar.then().then().then(). ...

각 then 에서의 return 값을 다음 then 인자로 넘겨준다

all()

Promise.all([p1, p2, p3, ...]);

모든 promise가 resolve 되면 resolve, 하나라도 reject 면 reject 한다

모든 프로세스가 작동하는지 확인할 때 유용하다 (서로 상관이 있을 때)

allSettled()

Promise.allSettled([p1, p2, p3, ...]);

.all과 달리 독립적으로 프로세스들의 resolve, reject를 확인할 수 있다

race()

Promise.race([p1, p2, p3]);

가장 빨리 resove / reject 되는 promise 실행함

Async Await

async 함수를 선언함으로써, 하나의 비동기 함수를 정의한다 (Promise의 없데이트)

이는 암시적으로 Promise를 사용하여 결과를 반환하지만,

.then()을 연속적으로 체이닝 할 필요 없이 간단한 구문을 가진다

// Promise 기본 const getMoviesPromise = () => { fetch("https://yts.mx/api/v2/list_movies.json") .then((response) => { console.log(response); return response.json(); }) .then((potato) => console.log(potato)) .catch((e) => console.log(`✔${e}`)); }; // Async Await const getMoviesAsync = async () => { try { const response = await fetch("https://yts.mx/api/v2/list_movies.json"); console.log(response); const json = await response.json(); } catch (e) { console.log(`✔${e}`); } finally { console.log(json); } }; getMoviesAsync();

await 식은 async 함수에서 실행을 일시 중지하고 전달된 Promise의 해결을 기다린 다음,

완료 후 값을 반환한다

이 await 식으로 인해 async 함수가 비동기적으로 완료된다

또한, 다음과 같이 async 함수 내에서

destructuring 과 await 를 이용해 병렬적으로 동작시킬 수 있다

try { const [moviesResponse, upcomingResponse] = await Promise.all([ fetch("https://yts.mx/api/v2/list_movies.json"), fetch("https://yts.mx/api/v2/movie_suggestions.json?movie_id=100"), ]); const [movies, upcoming] = await Promise.all([ moviesResponse.json(), upcomingResponse.json(), ]); console.log(movies, upcoming); }

더불어 axios 라이브러리 또한 많이 사용하는데,

이는 위처럼 .json() 과 같이 따로 변환하지 않는다

즉, 모든 것을 json이나 text로 변경해 변환할 필요가 없다

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9

Nomad Coders

반응형

from http://snupi.tistory.com/161 by ccl(A) rewrite - 2021-09-05 18:26:34