promise

약속해줘 …

promise의 필요성

자바스크립트는 비동기 처리를 위한 패턴으로 콜백함수를 사용하곤 합니다.

그런데 이러한 콜백 패턴은 많은 문제가 있습니다. 비동기를 처리하기 위해 사용했던 콜백함수들이 지옥을 만들어 내기 때문이죠.

이런식으로요 보기만해도 읽고 싶지 않아지게 만드는 마법을 부린답니다.

또한 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다고 해도 기다리지 않고 즉시 종료됩니다.

또한 에러 처리에도 불편함을 주죠.

 

이러한 프로미스의 한계와 불편함으로 인해

ES6에서는 비동기 처리를 위한 다른 패턴으로 promise를 도입했습니다.

promise란?

“A promise is an object that may produce a single value some time in the future”

 

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다.

promise 생성

Promise 생성자 함수는 비동기 처리를 수행할 콜백함수를 인수로 전달 받는데,

콜백 함수는 resolve와 reject 함수를 인수로 전달 받습니다.

const promise = new Promise((resolve, reject) => {
	// promise 함수의 콜백 함수 내부에서 비동기 처리를 수행한다.
	if (/* 비동기 처리 성공 */) {
    resolve('result');
  } else /* 비동기 처리 실패 */ {
    reject('fail')
  }
})

이런 식으로 생성을 합니다,

프로미스는 비동기에 대한 처리를 3가지 상태정보로 갖습니다.

 

생성된 직후의 프로미스의 상태는 기본적으로 pending입니다.

이후 비동기 처리가 수행되면 비동기 처리 결과에 따라 상태가 변경됩니다.

 

프로미스의 상태는 resolve or reject 함수를 호출 하는 것으로 결정 됩니다.

fulfiled 또는 rejected된 상태를 settled상태라고 합니다. settled상태는 실패 성공여부와 상관없이 비동기 처리가 수행된 상태를 말합니다.

프로미스의 후속 처리 메서드

자 이제 받아온 값들을 어떤 식으로 처리해줘야 할까요?.

크게 상태는 fulfiled와 reject에 따라 처리 됩니다.

promise.prototype.then

then은 두개의 콜백 함수를 인수로 전달 받습니다.

• 첫번째 콜백 함수는 프로미스가 fulfiled되면 호출됩니다. 이떄 콜백 함수는 프로미스의 비동기 처리 결과를 인수로 전달 받습니다.
• 두번째 콜백 함수는 프로미스가 rejecte되면 호출됩니다. 이때 콜백 함수는 프로미스의 에러를 인수로 전달 받습니다

// fulfiled
new Promise(resolve => resolve('fulfiled'))
  .then(v => console.log(v), e => console.log(e));

//  rejected
new Promise((_, reject) => reject(new Error('rejected')))
  .then(v => console.log(v), e => console.log(e));

promise.prototype.catch

이번에 소개할 메서드는 한개의 콜백 함수를 인자로 받습니다. catch 메서드의 콜백 함수는 promise가 rejected상태인 경우에만 호출 됩니다.

//  rejected
new Promise((_, reject) => reject(new Error('rejected')))
  .catch(e => console.log(e));

해결

자 그래서 처음에 말한 문제점중에 가독성을 해치는 비동기 코드는 어떻게 해결할 수 있을까요?

다음은 파일을 읽어 특정 ‘키워드’를 찾는 코드입니다.

 

참 지저분하게 엮여있죠?

const fs = require('fs');

fs.readFile('file1.txt', 'utf8', (err, data1) => {
  if (err) {
    console.error(err);
  } else {
    fs.readFile('file2.txt', 'utf8', (err, data2) => {
      if (err) {
        console.error(err);
      } else {
        fs.readFile('file3.txt', 'utf8', (err, data3) => {
          if (err) {
            console.error(err);
          } else {
            if (data1.includes('keyword') && data2.includes('keyword') && data3.includes('keyword')) {
              console.log('Keyword found in all files');
            } else {
              console.log('Keyword not found in all files');
            }
          }
        });
      }
    });
  }
});

const fs = require('fs');

function readFilePromise(filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, 'utf8', (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
}

readFilePromise('file1.txt')
  .then((data1) => {
    return readFilePromise('file2.txt')
      .then((data2) => {
        return [data1, data2];
      });
  })
  .then(([data1, data2]) => {
    return readFilePromise('file3.txt')
      .then((data3) => {
        return [data1, data2, data3];
      });
  })
  .then(([data1, data2, data3]) => {
    if (data1.includes('keyword') && data2.includes('keyword') && data3.includes('keyword')) {
      console.log('Keyword found in all files');
    } else {
      console.log('Keyword not found in all files');
    }
  })
  .catch((error) => {
    console.error(error);
  });

promise를 통해 가독성을 높인 코드입니다.

상대적으로 코드의 길이는 늘어났으나, 읽기 훨씬 수월한 코드입니다.

다음번엔 async와 await에 대해 정리해 보겠습니다.

 

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/