es6 promise 예제 만들어보기

비동기 처리를 하는데 있어 callback 이 자주 사용되었으나 콜백헬 등 가독성이 안 좋아지고 코드가 난잡해지는 경우가 있다.

 

callback

const wait = (inputStr, callback) => {
  setTimeout(() => {
    console.log(inputStr);
    callback();
  }, 500);
};

wait('A', () => {
  wait('B', () => {
    wait('C', () => {
      return;
    });
  });
});

// A -> B -> C 

 

promise

const wait = inputStr => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(inputStr);
      resolve();
    }, 500);
  });
};

wait('A')
  .then(() => wait('B'))
  .then(() => wait('C'));

// A -> B -> C 

 

promise 비동기 처리 하는 데 있어 매우 중요한 개념이므로 잘 기억해두자.

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(100);
  }, 500);
})
  .then(res1 => {
    console.log('res1', res1);  // 100
    return res1 + 100;
  })
  .then(res2 => {
    console.log('res2', res2);  // 200
    return res2 + 200;
  })
  .then(res3 => console.log('res3', res3)); // 400

res1 → res2→ res3 순서대로 잘 처리가 되는 것을 알 수 있다.

 

 

 

const promi = new Promise((resolve, reject) => {
	resolve(2);
});

// typeof promi === 'object'

const timeTwo = num => num * 2;

promi
	.then(timeTwo) // 4
	.then(timeTwo) // 8
	.then(result => console.log(result)) // 8
	.then(test => console.log(test)) // undefined
	.catch(err => console.log(err));

자바스크립트는 기본적으로 함수의 리턴값이 없으면, undefined 를 반환한다.

 

catch

const promi = new Promise((resolve, reject) => {
	resolve(2);
});

const timeTwo = num => num * 2;

promi
	.then(timeTwo) // 4
	.then(timeTwo) // 8
	.then(result => console.log(result)) // 8
	.then(test => console.log(test)) // undefined
	.then(() => {
		throw Error('Something Error');
	})
	.catch(err => console.log(err));

/*
8
undefined
Error: Something Error
*/


const promi2 = new Promise((resolve, reject) => {
	setTimeout(resolve, 1000, 'hahaha');
});
const promi3 = new Promise((resolve, reject) => {
	setTimeout(resolve, 3000, 'promi3~');
});
const promi1 = Promise.resolve(3);

// 2 -> 3 -> 1
promi2
	.then(result => console.log(result))
	.then(() => promi3)
	.then(result => console.log(result))
	.then(() => promi1)
	.then(result => console.log(result))
	.catch(err => console.log(err));

/*
hahaha
promi3~
3
*/

Promise.all

const promi2 = new Promise((resolve, reject) => {
	setTimeout(resolve, 1000, 'hahaha');
});
const promi3 = new Promise((resolve, reject) => {
	setTimeout(resolve, 3000, 'promi3~');
});
const promi1 = Promise.resolve(3);

// 총 4초 후 결과 반환
// 2 -> 3 -> 1
Promise.all([promi2, promi3, promi1]).then(result => {
	console.log(result);
});

//[ 'hahaha', 'promi3~', 3 ]

 

추가

const promi1 = new Promise((resolve, reject) => {
  resolve('promi1~');
});

const promi2 = new Promise((resolve, reject) => {
  resolve('promi2~');
});

const promi3 = new Promise((resolve, reject) => {
  resolve('promi3~');
  // reject('reject @.@');
});

Promise.all([promi2, promi1, promi3])
  .then(r => console.log(r))
  .catch(err => {
    console.log(err);
  });

// [ 'promi2~', 'promi1~', 'promi3~' ]

 

Promise.race

const promi2 = new Promise((resolve, reject) => {
	setTimeout(resolve, 1000, 'hahaha');
});
const promi3 = new Promise((resolve, reject) => {
	setTimeout(reject, 3000, 'promi3~');
});

Promise.race([promi2, promi3]).then(val => {
	console.log(val);
});
// 1초후 hahaha 출력, 

 

 

헷갈리는 것 추가

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('A');
  }, 500);
})
  .then(r => {
    console.log(r);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('B');
      }, 100);
    });
  })
  .then(r => {
    console.log(r);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('C');
      }, 50);
    });
  })
  .then(r => console.log(r));


A
B
C