[Javascript] promise

💭 promise

자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object
정해진 장시간에 기능을 수행하고 나서 정상적으로 기능이 수행이 되어 졌다면 성공의 메시지와 함께 처리된 결과값을 전달 해준다.
만약 기능을 수행하다가 예상치 못한 문제가 발생했다면 에러를 전달해준다.

1. producer
network에서 데이터 받기, files에서 큰 데이터 읽어오는 과정은 시간이 걸림 그래서 동기적으로 처리를 하면 그 다음 라인의 코드가 실행되지 않기 때문에 시간이 걸리는 이런 일들은 promise로 만들어서 비동기적으로 처리해야 한다.

즉, promise object를 만들 때 우리가 비동기적으로 수행하고 싶은 기능들의 코드들을 작성하고 성공적으로 잘했다면 resolve를 호출하게 되고 실패 했다면 실패한 것과 왜 실패했는지 에러를 전달 해 준다.

const promise = new Promise((resoleve, reject) => {
	// doing some geavy word (metwork, read files)
  setTimout(() => {
    resolve('수민');
    reject(new Error('no network'));
  }, 2000);
});

• Promise

  • executor(callback function)을 전달해 준다.
    : exector는 두개 콜백함수를 인자로 받는데 ( resolve, reject )
    resolve : 기능을 정상적으로 수행해서 마지막에 전달하는 함수
    reject : 기능을 수행하다가 중간에 문제가 생기면 호출되는 함수
    ➡ promise를 만드는 순간 executor 콜백 함수가 바로 실행 된다. 일이 끝나면 executor 내부에 있는 코드를 보고 콜백 중 하나를 호출

• Promise의 상태 값

  • pending: 비동기 처리 수행 전(resolve, reject가 아직 호출되지 않음)
  • fulfilled: 수행 성공(resolve가 호출된 상태)
  • rejected: 수행 실패(reject가 호출된 상태)
  • settled: 성공 or 실패(resolve나 reject가 호출된 상태)

2. comsumer (후속 처리 메서드)
then, catch, finally를 이용해서 값을 받아 올 수가 있다.

성공한 값, 실패한 에러를 받아와서 우리가 원하는 방식으로 처리 해 준다.

Promise
	.then(value => {
  		console.log(value);
})
	.catch(error => {
  		console.log(error);
})
	.finally(() => {
		console.log('finally');
})

• .then(성공 시, 실패 시)
  promise가 정상적으로 잘 수행이 된다면 내가 값을 받아 옴 -> resolve 콜백 함수로 전달 된 값!
  우리가 원하는 기능을 수행하는 콜백함수를 전달 해 줌
  값도 받을 수 있지만 또 다른 promise도 받을 수 있다.

• .catch(실패 시)
  에러가 발생했을 때 어떻게 처리할 것인지

• .finally()
  성공과 실패와 상관없이 무조건 마지막에 호출된다. 그래서 어떤 기능을 마지막으로 수행하고 싶을 때 사용

3. Promise chaining
then을 통해 비동기적인 여러가지(Promise)를 동시에 묶어서 처리 할 수 있다.

new Promise((resolve, reject) => {
	setTimeout(() => resolve("promise 1"), 1000);
}).then((result) => { // 후속 처리 메서드 하나를 쓰고,
	console.log(result); // promise 1
	return new Promise(...);
}).then((result) => { // 이렇게 연달아 then을 써서 이어주는 거예요.
	console.log(result);
	return new Promise(...);
}).then(...);