비동기 처리 방식 - promise & async & await
부트캠프를 하는 도중, 잘 알지 못했던 비동기 처리에 대해 정리하는 시간을 가지게 되었다.
mozilla 사이트에서는 다음과 같이 정의한다.
Async
async function 선언은 항상 AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의한다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수이다.
이 async 함수는 항상 promise를 반환한다. 그리고 async 함수 내에는 await가 포함될 수 있는데, await는 async 함수의 실행을 일시 중지하고 전달된 promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료 후에 값을 반환한다.
Promise
async 함수에 의해 반환된 값으로 해결되거나 async 함수 내에서 발생하는 캐치되지 않는 예외로 거부되는 값
예시는 다음과 같다.
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
async function asyncCall() {
console.log('calling');
const result = await resolveAfter2Seconds();
console.log(result);
}
asyncCall();
asyncCall
함수가 먼저 실행된다.calling
log가 나타난다.- async 함수 내의 await에 의해
resolveAfter2Seconds
가 실행되고,async
함수를 일시정지한다. resolveAfter2Seconds
함수는 Promise 객체를 반환하는데,setTimeout
로 2초 이후에resolve
가 실행된다.- Promise 객체는 pending 상태로 대기하다가,
resolve
될 때async
함수의 실행을 재개하면서 받아온result
를 log로 찍는다.
Challenge
n개의 api가 들어왔다고 할 때, 최종 접근 가능한 스테이트의 어레이로 변환해주는 함수를 짜세요.
const url1 = "https://reqres.in/api/users";
const url2 = "https://reqres.in/api/users";
const url3 = "https://reqres.in/api/users";
const urlArray = [url1, url2, url3];
function fetchArray(urlArr) {
return new Promise(async (resolve, reject) => {
const arr = [
await fetch(urlArr[0]).then(res => res.json()),
await fetch(urlArr[1]).then(res => res.json()),
await fetch(urlArr[2]).then(res => res.json())
]
resolve(arr);
});
}
async function convert() {
const result = await fetchArray(urlArray);
console.log(result);
}
convert();
convert 함수를 실행하게 되면 다음과 같이 결과가 나온다.
convert
함수에서fetchArray
함수에 await을 걸어놓았기 때문에 순차적으로 result를 받아온 뒤에 log를 찍게 된다.fetchArray
함수에서는Promise
객체를 반환하는데, Promise 내부에서도 반드시 순차적으로 실행되어야 하는 부분이 있기 때문에 async arrow 함수로 정의했고, await을 통해arr
가 구성되고나서resolve
를 실행함으로써, 온전히 변경된 arr를 반환하도록 하였다.- 본래
convert
함수에서는 await 되어있던 fetchArray에서 Promise 객체가 반환되었으므로, url에서 받아와 변경된 state들로 구성되어있는 arr를 log로 찍게되는 것이다.
Author And Source
이 문제에 관하여(비동기 처리 방식 - promise & async & await), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@peration/비동기-처리-방식-promise-async-await저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)