[Javascript Promise] 책 정리

JavaScript Promise

여러분 이책은 ⭐️무료⭐️입니다

 

최근에 면접을 보다가 callback, promise, async/await에 대한 질문을 받았는데 뭔가 명확하게 답변을 하지 못했다...!

실무에서는 사용을 하면서도 개념에 대해 설명을 하려고하니, 생각보다 막히는 부분이 많았음..ㅜㅠㅜㅠ

 

그래서 promise에 대한 개념을 다시 정리해보고자 이 책을 읽어봤음

책이 얇아서 금방읽는다!

 

1. Promise란 무엇인가

1.1 Promise란

• 비동기 처리 로직을 추상화한 객체와 그것을 조작하는 방식
• 하나의 인터페이스를 이용해 다양한 비동기 처리 문제를 해결할 수 있다.

1.2 Promise 살펴보기

• 구성요소 : Constructor + instance method(then, catch) + static method

2. Promise 사용하기

Promise의 정적 메서드, Promise.prototype 메서드, Thenable, 오류에 대한 예외처리

2.1 Promise.resolve

• new Promise()를 단축해서 표기할 수 있는 방법
• Fulfilled 상태인 promise객체를 반환한다.
• promise.resolve()는 thenable 객체를 promise객체로 변환할 수 있다.?????

---

thenable

• es6 promises 사양에 정의된 개념
• then을 가진 객체, 즉 유사 promise객체를 의미함
• Promise.resolve()는 thenable 객체의 then()이 promise의 then()과 같은 동작을 할것이라고 기대하고 promise객체로 변환한다.
• 근데 then을 가진 객체일지라도 무조건 ES6 Promise 사양을 따른다고 생각해서는 안된다.

2.2 Promise.reject

Promise.reject(new Error('오류'))

• promise 객체의 상태가 Rejected가 된다.

2.3 Promise.prototype.then

• 메서드 체인으로 등록한 콜백함수는 등록한 순서대로 처리된다.

Promise 객체에 메서드를 체인하여 등록한 함수들이 어떤 흐름으로 호출되는가?

• promise에서 추상화하고 있는 로직은 try-catch되고있는것과 같다.
• onRejected와 finally뒤에 catch가 없다면 2개중에 에러가 발생해도 catch못함
• throw 대신 reject사용하기!!
• .catch 는 프라미스에서 발생한 모든 에러를 다룬다. reject()가 호출되거나 에러가 던져지면 .catch에서 이를 처리함

// 해당 코드는 error handling이 된다
new Promise((resolve, reject) => {
  resolve("OK");
}).then((result) => {
  throw new Error("에러 발생!"); // 프라미스가 거부됨
}).catch(alert); // Error: 에러 발생!



// ==========================================
// 해당 코드는 error handling이 안된다
new Promise(function(resolve, reject) {
  setTimeout(() => {
    throw new Error("에러 발생!");
  }, 1000);
}).catch(alert);

// 해당 코드는 error handling이 된다
new Promise(function(resolve, reject) {
  setTimeout(() => {
    reject("에러 발생!");
  }, 1000);
}).catch(alert);

• then은 단순히 콜백함수를 등록하기만하는게 아니라 콜백에서 반환받은 값을 기준으로 새로운 promise객체를 생성하여 전달하는 기능도 한다.!

2.4 Promise.prototype.catch

• promise.then(undeifned, onRejected)의 랩핑함수

2.5 Promise.all

• promise 객체를 배열로 전달받고 객체의 상태가 모두 fulfilled 됐을때 then으로 등록한 함수를 호출한다.
• 전달받은 함수는 모두 동시에 실행된다. 그 결과값도 배열의 순서와 동일함

2.6 Promise.race

• promise 객체를 배열로 전달하는데, promise.all과는 달리 전달한 객체 중 하나만 완료(reject, resolve)되어도 다음 동작으로 넘어간다.
• 첫번째 promise가 fulfilled되더라도 다른 promise객체를 취소하지않는다.

3. Promise 특징

• 추상화 하는 로직이 동기적일지라도 항상 비동기로 처리되며, then()은 매번 새로운 promise 객체를 생성해 반환한다.

3.1 항상 비동기로 처리되는 Promise

• then으로 등록한 콜백함수는 비동기적으로 호출된다.
• 비동기 콜백을 다른 턴에 실행되도록 스케줄링하기위해 setTimeout 같은 비동기 API를 사용하라

3.2 새로운 promise 객체를 반환하는 then

• promise.then().catch()는 모두 최초의 promise 객체에 메서드를 체인하는것처럼 보이지만, 실제로는 then과 catch는 새로운 promise 객체를 생성해서 반환한다.

3.3 예외 처리가 되지않는 onRejected

• onRejected()의 대상은 이전의 promise 객체에 대한 처리이다!!!!!!

Promise.resolve(42).then(throwError).catch(onRejected); // good
Promise.resolve(42).then(throwError, onRejected) // bad

3.4 콜백-헬과 무관한 Promise

• promise는 콜백헬을 해결한다기보다는 일부 완화를 하는것! promise는 비동기 처리 자체를 쉽게 다룰수있도록 하는것이다!
• 콜백-헬을 완화하는게 promise의 목적일까?

역자가 생각하기로는 콜백-핼을 완화할 수 있는 가장 큰 이유는 통일된 인터페이스, 명확한 비동기 시점표현, 강력한 에러 처리 메커니즘때문

• promise는 미래 어느 시점이 되면 값을 채워주기로 약속한 빈 그릇이며 비동기 처리를 추상화한 추상 컨테이너다.
• 깊게 중첩되는 콜백이나, 길게 연결되는 Promise 모두 함수 하나의 책임이 거대하다는뜻!!!! 그래서 콜백이 깊게 중첩되는 경우는 설계를 의심해야함…!!!!!!
• 책임 및 관심사 별로 나눠 추상화하고 객체를 설계하면됨!

---

비동기 처리 패턴

callback, promise, async/await는 각 문법의 인터페이스, 사용법, 장/단점이 디테일하게 다르고

비동기라는 처리에 대한 큰 틀은 비슷하다고 생각한다..!!!!1 아닐수도있음..혹시...위험한 발언인가..?

 

promise를 기준으로 차이점을 살펴보자

callback 과의 차이점

- callback패턴은 비동기 처리 후 실행할함수를 인자로 넘겨주는 방식이기때문에 depth가 깊어지면 가독성이 떨어진다.

- callback함수의 제어권은 개발자에게있는것이아니라, 콜백함수를 호출하는 코드가 가진다.

 

Promise는 callback 패턴이가지는 콜백헬을 해결해주는것뿐만 아니라, callback패턴과는 다르게 return value를 사용할 수 있다.

그리고 callback패턴내에서는 에러처리를 개별적으로 해줘야하는데, promise체인은 catch메서드를 사용해 error 처리를 편리하게 할 수 있음!

 

async/await과의 차이점

- await은 async함수 내부에서만 사용할수있음

- async함수의 반환값은 Promise이다.

- 코드를 동기적으로 작성할 수 있다.(개인적으로도 이 이유때문에 async/await을 주로 사용함)

- 에러 처리할때는 try/catch를 사용한다. try구문 내에서 promise를 사용하는경우, 해당 promise에서 error 발생시 catch구문에 잡히지않는다.

 

- async/await은 비동기코드를 동기적으로 읽고 쓸수있게 하기위해 만들어졌다.