CTO께서 promise를 설명해달라고 하셨다 그러다가 mdn에서 resolve랑 reject도 설명해주세요~ 했는데 음.. 얘네 역할은 아는데 어디서 온 누구인지.. 모르겠었다.
그래서 이번에는 promise의 장단점 말고 promise 자체를 설명해보자! 생각했다.

(10분 이내에 테크톡이니 굉장히 좁은 내용입니다. 공부하면서 도움되었던 글과 영상은 참조부분에 있습니다)

Promise

비동기 작업을 위한 객체이다. 완료 또는 실패의 결과값을 나타낸다.

• ES6부터 JS의 표준 내장 객체로 등록되어 있다.

console.log(Promise) ;
// native code

Promise의 상태

대기(pending): 이행하거나 거부되지 않은 초기 상태

⇒ 이행(fulfilled): 연산이 성공적으로 완료됨.

⇒ 거부(rejected): 연산이 실패함.

Promise사용한 작업의 흐름

Promise는 생성자를 통해 생성한다.

• 생성자의 인자로 'executor' 함수를 이용한다.

new Promise(executor);

executor 함수는 resolve, reject 인자를 가진다.

new Promise((resolve, reject) => { 
  // working...
  resolve();
  // or
  reject();
});

• resolve와 reject는 함수이다.
• 이 함수는 resolve, reject 인자 두가지를 갖는다. resolve함수를 실행하면 fulfilled 상태가 되고, reject 함수를 실행하면 rejected 상태가 된다.

코드로 보기

// when new Promise is created, the executor runs automatically ✨

const promise1 = new Promise((resolve, reject) => {
  console.log('doing something...');
  // 어떤 db, network 작업 중 ...
  // pending상태

  setTimeout(() => {
    resolve('new data'); // fulfilled 상태
    //reject(new Error('no network')) // rejected 상태, resolve 주석 처리 후 reject 주석 지우기
  }, 2000);
});

promise1.then((value) => {
  console.log(value); // 성공
}, (reason) => {
  console.log(reason); // 실패
});

1. Promise 객체를 만듭니다.
2. Promise 생성자는 매개변수로 "실행 함수"를 받습니다. executor
3. 실행자 함수는 매개변수로 resolve, reject 함수를 받습니다
4. resolve > 성공적으로 기능을 잘 수행한다면 resolve라는 콜백함수를 가공된 데이터와 함께 호출한다.
5. reject > 'Uncaught (in promise) Error: no network at eval'
6. value는 promise가 정상적으로 잘 수행되어서 마지막으로 reslove 콜백함수에서 전달된 'new data' 값이다.

🔥 then 두 개의 콜백 함수를 인수로 받습니다. 하나는 Promise가 이행 했을 때, 다른 하나는 거부 했을 때를 위한 콜백 함수입니다.

콘솔에 위의 객체를 찍어보자

console.log('promise1:', promise1);

테크톡 후기

처음으로 발표한 테크톡은 내용이 너무 많고 별게 없어서 질문을 받는데 조금 난감했는데 이번 테크톡은 좁고 깊게 준비하여 질문이 거의 없었다. promise를 공부할 때 주로 비동기사용 때문에 많이 공부하는데 promise를 사용하면서 점점 코드도 길어지고 경험도 기초가 없다보니 코드가 어렵게 다가왔었다.
근데 이번 테크톡을 통해 promise를 잘 알게되어 많이 친숙해졌다.

질문이 들어왔던것은 'reject도 then으로 받을 수 있나요?' 였는데 네.. 됩니다..! 이 테크톡은 mdn 문서를 바탕으로, 그리고 promise를 설명하기 위한 테크톡이 었기 때문에 에러처리 및 다른것들은 굳이 사용하지 않았고 promsie안에 있는 것들을 사용했습니다.

References

• [mdn] 프로미스

• [mdn] 프로미스 생성자

• [mdn] 프로미스 then

• Mastering Async/Await 번역본(책의 저자가 node.js, mongodb 엔지니어이다.)

• [엘리의 드림코딩] 프로미스(에러처리 부분을 더 확실히 알 수 있습니다!)