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에 해당하는 콜백함수 부분은 실행되는 것을 볼 수 있다.

'Front-end > JavaScript' 카테고리의 다른 글

JS 비동기 5편 - parallel, race, sequencial  (0) 2023.04.13
JS 비동기 4편 - for await of  (0) 2023.04.12
JS 비동기 2편 - async  (0) 2023.03.20
JS 비동기 1편 - Promise  (0) 2023.03.18
FP vs OOP  (0) 2023.03.16