GeezerVison is showing ko.javascript.info — async와 await를 사용하여 코드 변경하기
돌아가기async와 await를 사용하여 코드 변경하기
프라미스 체이닝 챕터의 예시 중 하나를 .then/catch 대신 async/await를 사용해 다시 작성해봅시다.
function loadJson(url) {
return fetch(url)
.then(response => {
if (response.status == 200) {
return response.json();
} else {
throw new Error(response.status);
}
})
}
loadJson('no-such-user.json')
.catch(alert); // Error: 404
자세한 설명은 아래에서 확인할 수 있습니다.
async function loadJson(url) { // (1)
let response = await fetch(url); // (2)
if (response.status == 200) {
let json = await response.json(); // (3)
return json;
}
throw new Error(response.status);
}
loadJson('no-such-user.json')
.catch(alert); // Error: 404 (4)
설명:
-
함수 loadJson은 async 함수가 됩니다.
-
함수 안의 .then을 전부 await로 바꿉니다.
-
위 답안처럼 await를 사용해도 되지만, 아래처럼 return response.json()를 사용해도 됩니다.
if (response.status == 200) {
return response.json(); // (3)
}
대신, 이렇게 작성하면 프라미스가 이행되는걸 await를 사용해 바깥 코드에서 기다려야 합니다. 위 예시는 해당 사항이 없지만 말이죠.
-
loadJson에서 던져진 에러는 .catch에서 처리됩니다. loadJson을 호출하는 코드는 async 함수 내부가 아니기 때문에 await loadJson(…)을 사용할 수 없습니다.