[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fdevlog-juneby.vercel.app%2Fposts%2FJavaScript%2Fdeep-dive-js-45&count_bg=%233B82F6&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=views&edge_flat=false)](https://hits.seeyoufarm.com)

# 🌟 비동기 처리를 위한 콜백 패턴의 단점 ## ✨콜백 헬 ```jsx function get(url) { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // 서버의 응답을 콘솔에 출력한다. console.log(JSON.parse(xhr.response)); } else { console.error(`${xhr.status} ${xhr.statusText}`); } }; } // id가 1인 post를 취득 get("https://jsonplaceholder.typicode.com/posts/1"); /* { "userId": 1, "id": 1, "title": "sunt aut facere ...", "body": "quia et suscipit ..." } */ ``` 위 예제의 `get` 함수는 **서버의 응답 결과를 콘솔에 출력**한다. get 함수는 `비동기 함수`이다. 즉, **비동기로 동작하는 코드(xhr.onload)가 완료되지 않았다 해도 기다리지 않고 즉시 종료**된다. 다시 말해, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라서, 만약 비동기 함수 내부의 비동기로 동작하는 코드에서 `처리 결과를 외부로 반환`하거나 `상위 스코프의 변수에 할당`하면 기대한 대로 동작하지 않는다 예를 들어, `setTimeout` 함수는 `비동기 함수`다. `setTimeout` 함수가 비동기 함수인 이유는 **콜백 함수의 호출이 비동기로 동작**하기 때문이다. `setTimeout` 함수를 호출하면 `콜백 함수를 호출 스케줄링` 한 다음, 타이머 id를 반환하고 즉시 종료된다. > 즉, 비동기 함수인 setTimeout 함수의 콜백 함수는 setTimeout 함수가 종료된 이후에 호출된다. ```jsx let g = 0; // 비동기 함수인 setTimeout 함수는 콜백 함수의 처리 결과를 외부로 반환하거나 // 상위 스코프의 변수에 할당하지 못한다. setTimeout(() => { g = 100; }, 0); console.log(g); // 0 ``` 위 예제와 같이 `setTimeout`(비동기 함수)에서 비동기로 동작하는 코드(콜백 함수)에서 `상위 스코프에 값을 할당`하면 **기대한 대로 동작하지 않는다.** ```jsx // GET 요청을 위한 비동기 함수 const get = (url) => { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // ① 서버의 응답을 반환한다. return JSON.parse(xhr.response); } console.error(`${xhr.status} ${xhr.statusText}`); }; }; // ② id가 1인 post를 취득 const response = get("https://jsonplaceholder.typicode.com/posts/1"); console.log(response); // undefined ``` 위 예제의 `get` 함수 역시 마찬가지다. `xhr.onload`는 get함수가 종료된 이후 실행된다. > 이처럼 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없다. 따라서, 비동기 함수의 처리 결과(서버의 응답 등)에 대한 `후속 처리를 비동기 함수 내부에서 수행`해야 한다. 이때, 비동기 함수를 범용적으로 사용하기 위해 **비동기 함수에 비동기 처리 결과에 대한 후속 처리를 수행하는** `콜백 함수를 전달`하는 것이 일반적이다. 필요에 따라, 비동기 처리가 성공하면 호출될 콜백 함수와 비동기 처리가 실패하면 호출될 콜백 함수를 전달할 수 있다. ```jsx // GET 요청을 위한 비동기 함수 function get(url, successCallback, failureCallback) { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { successCallback(JSON.parse(xhr.response)); } else { failureCallback(xhr.status); } }; } get("https://jsonplaceholder.typicode.com/posts/1", console.log, console.error); /* { "userId": 1, "id": 1, "title": "sunt aut facere ...", "body": "quia et suscipit ..." } */ ``` 이처럼, `콜백 함수`를 통해 비동기 처리 결과에 대한 후속 처리를 수행하는 비동기 함수가 비동기 처리 결과를 또다시 비동기 함수를 호출해야 한다면, `콜백 함수가 중첩되어 복잡도가 높아진다.` > 이 현상을 콜백 헬 이라고 부른다. ## ✨에러 처리의 한계 비동기 처리를 위한 콜백 패턴의 문제점 중에서 가장 심각한 것은 `에러 처리가 곤란`하다는 것이다. ```jsx try { setTimeout(() => { throw new Error("Error!"); }, 1000); } catch (e) { // 에러를 캐치하지 못한다 console.error("캐치한 에러", e); } ``` `try` 코드 블럭 내에서 호출한 `setTimeout` 함수는 1초 후에 콜백 함수가 실행되도록 타이머를 설정하고, `1초 후에 콜백 함수가 에러를 발생`시킨다. > 하지만 이 에러는 catch 코드 블록에서 캐치되지 않는다. `setTimeout` 함수는 호출되면, 실행 컨텍스트를 만들고 콜 스택에 푸시되어 실행된다. 그 후, 콜백 함수가 호출되는 것을 기다리지 않고, 종료되고 콜 스택에서 팝된다. 이후 `타이머가 만료`되면, 브라우저에 의해 콜백 함수가 `태스크 큐`에 들어가게 된다. 현재 콜 스택은 비어있기 때문에, `이벤트 루프`에 의해 **콜백 함수는 콜 스택에 푸시되고 실행**된다. `setTimeout` 함수의 콜백 함수가 실행될 때, setTimeout 함수는 이미 콜 스택에서 제거된 상태다. 즉, `setTimeout`함수의 콜백 함수를 호출한 것이 setTimeout 함수가 아니라는 점이다. > **에러는 호출자 방향으로 전파된다**. 즉, `콜 스택의 아래 방향으로 전파`된다. 하지만, 앞에서 살펴본 바와 `같이 setTimeout` 함수의 콜백 함수를 호출한 것은 `setTimeout` 함수가 아닐 뿐더러, 이미 콜 스택에서 팝 되어 사라져있다. 따라서, 콜백 함수의 에러는 `catch` 블록에서 캐치되지 않는다. > 이를 위해 ES6에서 프로미스가 도입되었다. # 🌟 프로미스의 생성 `Promise` 생성자 함수는 `new` 연산자와 함께 호출하면 프로미스를 생성한다. `Promise`는 호스트 객체가 아닌 `ECMA Script`사양에 정의된 `표준 빌트인 객체`다. `Promise` 생성자 함수는 **비동기 처리를 수행할 콜백 함수를 인수로 전달**받는데, 이 콜백 함수는 `resolve`와 `reject` 함수를 인수로 전달받는다. ```jsx // 프로미스 생성 const promise = new Promise((resolve, reject) => { // Promise 함수의 콜백 함수 내부에서 비동기 처리를 수행한다. if (/* 비동기 처리 성공 */) { resolve('result'); } else { /* 비동기 처리 실패 */ reject('failure reason'); } }); ``` `Promise` 생성자 함수가 인수로 전달받는 콜백 함수는 내부에서 비동기 처리를 수행한다. > 이때, 비동기 처리가 성공하면 resolve함수를, 실패하면 reject 함수를 호출한다. ```jsx function promiseGet(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { resolve(JSON.parse(xhr.response)); } else { reject(new Error(xhr.status)); } }; }); } promiseGet("https://jsonplaceholder.typicode.com/posts/1"); ``` 앞서 살펴본, `get`함수를 `promise`를 이용하도록 다시 구현했다. 비동기 함수인 `pormiseGet`은 **함수 내부에서 프로미스를 생성하고 반환**한다. 비동기 처리는 Promise 생성자 함수가 인수로 전달받는 콜백 함수 내부에서 수행한다. 만약, 비동기 처리가 `성공하면 resolve` 함수에 인수로 전달하면서 호출하고, `실패하면 reject` 함수에 인수로 전달하면서 호출한다. 프로미스는 다음과 같이 현재 비동기 처리가 어떻게 진행되고 있는지를 나타내는 `상태 정보`를 갖는다. - `pending` : 비동기 처리가 아직 수행되지 않은 상태 - `fulfilled` : 비동기 처리가 수행된 상태(성공) - `rejected` : 비동기 처리가 수행된 상태(실패) 비동기 처리가 성공해 `resolve를 호출하면 fulfilled` 로 상태가 변하고, 실패해서 `reject를 호출하면 rejected`로 상태가 변경된다. # 🌟 프로미스의 후속 처리 메서드 프로미스의 비동기 처리 상태가 변화하면 이에 따른 후속 처리를 해야 한다. 예를 들어, 프로미스가 `fulfilled` 상태가 되면 프로미스의 처리 결과를 가지고 무언가를 해야 하고, `reject` 상태가 되면 처리 결과(에러)를 가지고 에러 처리를 해야 한다. ## ✨Promise.prototype.then `then` 메서드는 두 개의 콜백 함수를 인수로 전달받는다. 첫 번째 콜백 함수는 프로미스가 `fulfilled` 상태`(resolve 호출)`가 되면 호출된다. 이때 콜백 함수는 프로미스의 비동기 처리 결과를 인수로 전달받는다. 두 번째 콜백 함수는 프로미스가 `rejected` 상태`(reject 호출)`가 되면 호출된다. 이때 콜백 함수는 프로미스의 에러를 인수로 전달받는다. ```jsx // fulfilled new Promise((resolve) => resolve("fulfilled")).then( (v) => console.log(v), (e) => console.error(e) ); // fulfilled // rejected new Promise((_, reject) => reject(new Error("rejected"))).then( (v) => console.log(v), (e) => console.error(e) ); // Error: rejected ``` ## ✨Promise.prototype.catch `catch` 메서드는 한 개의 콜백 함수를 인수로 전달받는다. catch 메서드의 콜백 함수는 `프로미스가 rejected 상태인 경우만 호출`된다. ```jsx // rejected new Promise((_, reject) => reject(new Error("rejected"))).catch((e) => console.log(e) ); // Error: rejected ``` ## ✨Promise.prototype.finally `finally` 메서드는 한 개의 콜백 함수를 인수로 전달받는다. `finally` 메서드의 콜백 함수는 `프로미스의 성공 또는 실패와 상관 없이 무조건 한 번 호출`된다. 프로미스의 상태와 상관없이 공통적으로 수행해야 할 처리 내용이 있을 때 유용하다. ```jsx new Promise(() => {}).finally(() => console.log("finally")); // finally ``` 이 전에 프로미스로 구현한 비동기 함수 get을 사용해 후속 처리를 구현해보자. ```jsx function promiseGet(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // 성공적으로 응답을 전달받으면 resolve 함수를 호출한다. resolve(JSON.parse(xhr.response)); } else { // 에러 처리를 위해 reject 함수를 호출한다. reject(new Error(xhr.status)); } }; }); } // promiseGet 함수는 프로미스를 반환한다. promiseGet("https://jsonplaceholder.typicode.com/posts/1") .then((res) => console.log(res)) .catch((err) => console.error(err)) .finally(() => console.log("Bye!")); ```
# 🌟 프로미스 체이닝 ```jsx const url = "https://jsonplaceholder.typicode.com"; // id가 1인 post의 userId를 취득 promiseGet(`${url}/posts/1`) // 취득한 post의 userId로 user 정보를 취득 .then(({ userId }) => promiseGet(`${url}/users/${userId}`)) .then((userInfo) => console.log(userInfo)) .catch((err) => console.error(err)); ``` 위 예제에서, `then` -> `then` -> `catch` 순서로 후속 처리 메서드를 호출했다. `then`, `catch`, `finally` 후속 처리 메서드는 `언제나 프로미스를 반환`하므로 `연속적으로 호출`할 수 있다. 이를 **프로미스 체이닝** 이라고 한다. # 🌟 프로미스의 정적 메서드 Promise는 주로 생성자 함수로 사용되지만, 함수도 객체이기 때문에, 메서드를 가질 수 있다. ## ✨Promise.resolve, Promise.reject `Promise.resolve` 메서드는 인수로 전달받은 값을 resolve하는 프로미스를 생성한다. ```jsx // 배열을 resolve하는 프로미스를 생성 const resolvedPromise = Promise.resolve([1, 2, 3]); resolvedPromise.then(console.log); // [1, 2, 3] ``` `Promise.reject` 메서드는 인수로 전달받은 값을 reject하는 프로미스를 생성한다. ```jsx // 에러 객체를 reject하는 프로미스를 생성 const rejectedPromise = Promise.reject(new Error("Error!")); rejectedPromise.catch(console.log); // Error: Error! ``` ## ✨Promise.all `Promise.all` 메서드는 여러 개의 비동기 처리를 모두 `병렬 처리할 때 사용`한다. ```jsx const requestData1 = () => new Promise((resolve) => setTimeout(() => resolve(1), 3000)); const requestData2 = () => new Promise((resolve) => setTimeout(() => resolve(2), 2000)); const requestData3 = () => new Promise((resolve) => setTimeout(() => resolve(3), 1000)); // 세 개의 비동기 처리를 순차적으로 처리 const res = []; requestData1() .then((data) => { res.push(data); return requestData2(); }) .then((data) => { res.push(data); return requestData3(); }) .then((data) => { res.push(data); console.log(res); // [1, 2, 3] ⇒ 약 6초 소요 }) .catch(console.error); ``` 위 예제를 살펴보면, 비동기 처리를 `순차적으로 처리`한다. 즉, 앞선 비동기 처리가 완료되면 다음 비동기 처리를 수행한다. 따라서, `총 6초가 소요`된다. 그런데 위 예제의 세 개의 비동기 처리는 `서로 의존하지 않고 개별적으로 수행`된다. 즉, 앞선 비동기 처리 결과를 다음 비동기 처리가 사용하지 않는다. 이때, `Promise.all` 메서드를 사용하면 `비동기 처리를 모두 병렬 처리`할 수 있다. ```jsx const requestData1 = () => new Promise((resolve) => setTimeout(() => resolve(1), 3000)); const requestData2 = () => new Promise((resolve) => setTimeout(() => resolve(2), 2000)); const requestData3 = () => new Promise((resolve) => setTimeout(() => resolve(3), 1000)); Promise.all([requestData1(), requestData2(), requestData3()]) .then(console.log) // [ 1, 2, 3 ] ⇒ 약 3초 소요 .catch(console.error); ``` `Promise.all` 메서드는 프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달받는다. `Promise.all` 메서드는 인수로 전달받은 배열의 모든 프로미스가 `모두 fulfilled 상태가 되면 종료`한다. 따라서, `Promise.all` 메서드가 종료하는 데 걸리는 시간은 가장 늦게 `fulfilled` 상태가 되는 프로미스의 처리 시간보다 조금 더 길다. 모든 프로미스가 `fulfilled` 상태가 되면, `resolve`된 처리 결과를 모두 `배열에 저장해 새로운 프로미스를 반환`한다. 이때, **첫번째 프로미스가 가장 나중에 fulfilled 상태가 되더라도, Promise.all 메서드는 첫 번째 프로미스가 resolve한 처리 결과부터 차례대로 배열에 저장해 그 배열을 resolve하는 새로운 프로미스를 생성**한다. ## ✨Promise.race `Promise.race` 메서드는 `Promise.all` 메서드와 같이 프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달받는다. 다른 점은 모든 Promise가 `fulfilled` 상태가 될 때까지 기다리는 것이 아니라, **가장 먼저 fulfilled 상태가 된 프로미스의 처리 결과를 resolve하는 새로운 프로미스를 반환**한다. ```jsx Promise.race([ new Promise((resolve) => setTimeout(() => resolve(1), 3000)), // 1 new Promise((resolve) => setTimeout(() => resolve(2), 2000)), // 2 new Promise((resolve) => setTimeout(() => resolve(3), 1000)), // 3 ]) .then(console.log) // 3 .catch(console.log); ``` ## ✨Promise.allSettled `Promise.all`은 `Promise`가 하나라도 실패하면, `전체 Promise`가 실패합니다. 따라서, `모 아니면 도`와 같은 상황을 연출하게 됩니다. 반면, `Promise.allSettled`의 경우에는, 모든 `Promise`가 끝날때 까지 기다린 후, `Promise`의 성공과 실패 여부를 함께 반환합니다. ```jsx const requestData1 = () => new Promise((resolve) => setTimeout(() => resolve(1), 3000)); const requestData2 = () => new Promise((resolve, reject) => setTimeout(() => reject(2), 2000)); const requestData3 = () => new Promise((resolve) => setTimeout(() => resolve(3), 1000)); Promise.allSettled([requestData1(), requestData2(), requestData3()]) .then((result) => console.log(result)) .catch((err) => console.log("err : ", err)); [ { status: "fulfilled", value: 1 }, { status: "rejected", reason: 2 }, { status: "fulfilled", value: 3 }, ]; ``` `성공`한 경우에는, `{ status : 'fulfilled', value }` 를 반환하며, `실패`한 경우에는 `{ status : 'rejected', reason }` 을 반환하게 됩니다. **PolyFilll** `Promise.allSettled`를 지원하지 않는 경우에는, `Promise.allSettled`에 대한 `PolyFill`을 구현하면 됩니다. ```jsx if (!Promise.allSettled) Promise.allSettled = function (promises) { return Promise.all( promises.map((p) => Promise.resolve(p) .then((value) => ({ status: "fulfilled", value, })) .catch((err) => ({ status: "rejected", err, })) ) ); }; ``` `Promise.resolve`를 이용해, `Promise`가 아닌 경우에도, `Promise`로 변환합니다. 이후, `then`과 `catch`를 통해, 성공과 실패에 대한 반환값을 다르게 지정합니다. `Promise.resolve`를 사용하지 않고, `new` 키워드를 통해 `Promise`를 만들어, 제공할 수도 있습니다. ```jsx if (!Promise.allSettled) Promise.customAllSettled = function (promises) { return Promise.all( promises.map((p) => new Promise((resolve, reject) => { resolve(p); }) .then((value) => ({ status: "fulfilled!", value, })) .catch((err) => ({ status: "rejected", err, })) ) ); }; ``` # 🌟 마이크로태스크 큐 ```jsx setTimeout(() => console.log(1), 0); Promise.resolve() .then(() => console.log(2)) .then(() => console.log(3)); ``` 위 예제를 살펴보면, 프로미스의 후속처리 메서드도 비동기로 동작하기 때문에, 1 2 3 의 순서로 출력될 것처럼 보이지만, 결과는 `2 3 1`이다. 그 이유는 프로미스의 후속 처리 메서드의 콜백 함수는 `태스크 큐가 아니라 마이크로태스크 큐에 저장`되기 때문이다. `마이크로태스크 큐`에는 프로미스의 후속 처리 메서드의 콜백 함수가 일시 저장된다. 그 외의 비동기 함수의 콜백 함수나 이벤트 핸들러는 태스크 큐에 일시 저장된다. > 마이크로태스크 큐는 태스크 큐보다 우선순위가 높다. 즉, `이벤트루프`는 `콜 스택`이 비면 먼저 `마이크로태스크 큐`에서 대기하고 있는 함수를 가져와 실행한다. # 🌟fetch `fetch` 함수는 `XMLHttpRequest` 객체와 마찬가지로 `HTTP` 요청 전송 기능을 제공하는 클라이언트 사이드 Web API다. `fetch` 함수는 프로미스를 지원하기 때문에, 비동기 처리를 위한 콜백 패턴에서 자유롭다., ```jsx fetch("https://jsonplaceholder.typicode.com/todos/1").then((response) => console.log(response) ); ``` `fetch` 함수는 `HTTP` 응답을 나타내는 `Response` 객체를 래핑한 `Promise`를 반환한다. 후속 처리 메서드인 `then`을 통해 프로미스가 `resolve`한 `Response` 객체를 전달받을 수 있다. ```jsx fetch("https://jsonplaceholder.typicode.com/todos/1") // response는 HTTP 응답을 나타내는 Response 객체이다. // json 메서드를 사용하여 Response 객체에서 HTTP 응답 몸체를 취득하여 역직렬화한다. .then((response) => response.json()) // json은 역직렬화된 HTTP 응답 몸체이다. .then((json) => console.log(json)); // {userId: 1, id: 1, title: "delectus aut autem", completed: false} ```

제너레이터와 asnyc/await [모던 자바스크립트 Deep Dive 46장]

프로미스 [모던 자바스크립트 Deep Dive 45장]