Front-end/JavaScript
JS 비동기 3편 - finally
파리외 개발자
2023. 4. 10. 22:27
ES9에서 추가된 finally는 promise가 모두 실행된 후
마지막으로 무조건 실행을 시켜주는 기능을 한다. (결과의 성공, 실패에 영향 없음)
//finally
const urls = [
"https://jsonplaceholder.typicode.com/users/1",
"https://jsonplaceholder.typicode.com/users/2",
"https://jsonplaceholder.typicode.com/users/3",
"https://jsonplaceholder.typicode.com/users/4",
];
Promise.all(
urls.map((url) => {
return fetch(url).then((peaple) => peaple.json());
})
)
.then((array) => {
// throw Error;
console.log("1", array[0]);
console.log("2", array[1]);
console.log("3", array[2]);
console.log("4", array[3]);
})
.catch((err) => console.log("Error throw", err))
.finally(() => console.log("extra")); //no matter success or fail

promise all은 then을 통해 네 개의 promise결괏값을 콘솔에 출력한다.
마지막으로 finally에 작성된 콜백함수가 extra를 추가로 출력한다.

이번엔 강제로 에러를 발생시켜 보았다.
promise가 reject를 가지고 오므로 then대신에 catch가 실행되며
이번에도 finally에 해당하는 콜백함수 부분은 실행되는 것을 볼 수 있다.