Javascript promise에 대해 알아보자.

기존에 ajax와 같은 비동기 요청이 종료가 되고 특정한 작업을 수행하고 싶을경우 콜백함수를 설정하여 진행했었다.

  Common.sendAjax({
    url: Common.getFullPath('user/cert/check'),
    param: { 'otp' : $otpNum.val(), 'userId' : $joinEmail.val() },
    type: 'POST',
    success: (e) => {
      // 성공 시 발생할 콜백함수
    },
    failed: () => {
      // 실패시 발생할 콜백함수
    }
  });

이런 비동기 프로그래밍은 기존 동기식 프로그래밍 보다 작업을 요청하고 다른 작업을 할 수 있는 장점이 있다. 하지만 이는 그 유명한 콜백 지옥을 만들 수 가 있다. 

아래 보면 이런 콜백 지옥을 경험을 다들 해봤을거다.  실제로 이렇게 콜백지옥이 발생한 경우가 굉장히 많다.

  Common.sendAjax({
    url: Common.getFullPath('user/cert/check'),
    param: { 'otp' : $otpNum.val(), 'userId' : $joinEmail.val() },
    type: 'POST',
    success: (e) => {
      // 성공 시 발생할 함수
      Common.sendAjax({
        success:(e) => {
          Common.sendAjax({     
            /**
                콜백지옥     
           
            */ 
          });
        }
      });
    },
    failed: () => {
      // 실패시 발생할 함수
    }
  });

Promise를 적용해서 비동기 프로그래밍 진행하기.

promise 객체를 만들고 동작을 수행한 후 성공하면 resolve, 실패할 경우에 reject 메소드를 실행시킨다. resolve 메소드를 실행할 경우 promise 상태는 Fulfilled 상태가 된다. 그리고 reject 메소드가 실행되면 Rejected 상태가 된다.

// Promise 
 
'use strict';
 
const test = module.exports;
 
test.proTest = (isSucess) => {
  return new Promise((resolve, reject) => {
    isSucess ? resolve('re1') : reject(new Error('r2'));
  });
};
 
 
 
 
// 테스트 코드
 
'use strict';
 
const promiseTest = require('../../lib/libraryTest/promise-test');
const assert = require('assert');
const chai = require('chai');
const should = chai.should;
const expect = chai.expect;
 
describe('promise 테스트', () => {
  it('resolve 테스트', async () => {
    try {
      let resolveTest = await promiseTest.proTest(true);
 
      assert(resolveTest == 're1');
    } catch (e) {
      should.not.exist(e);
    }
 
  });
 
  it('reject 테스트', async () => {
    try {
      let resolveTest = await promiseTest.proTest(false);
    } catch (e) {
      console.log(e);
      expect(e).to.exist;
    }
  });
 
});

Promise Chaining 

프로미스를 이용해서 콜백 지옥 대신에 프로미스를 연결해서 연속된 동작을 진행할 수 있다. 하지만 이런 프로미스 체이닝도 문제가 있는게 에러 발생시에 catch로 받을 수 있지만 어느 프로미스에서 발생한 에러인지를 알기가 어렵다는 문제가 있다. 

'use strict';
 
const test = module.exports;
 
test.proTest = (isSucess) => {
  return new Promise((resolve, reject) => {
    isSucess ? resolve('re1') : reject(new Error('r2'));
  }).then((result) => {
    return result + 'babo';
  }).then((result) => {
    return result + 'Hi!';
  }).catch((err) => {
    return err;
  });
};