[ javascript ] Promise

Promise 란?

Promise는 비동기 작업을 좀 더 수월하게 처리할 수 있도록 ES6에 도입된 기능입니다

이전에는 비동기 잡얼을 처리해야 할 때 이 작업이 끝나고 어떤 작업을 처리해야 할 때 콜백 함수로 처리를 해줬어야 했는데 콜백 함수가 많이 질 경우 코드가 난잡해졌었습니다 그래서 Promise가 추가 가 되었습니다 원래는 라이브러리였는데 이후에는 javascript에 추가가 된 기능입니다

콜백 함수가 난잡한 코드

// 숫자 n을 파라미터로 받아와서 5번을 걸쳐 1초마다 1씩 더하는 함수
function increaseAndPrint(n, callback) {
	setTimeout(() => {
		const increased = n + 1;
		console.log(increased);
		if(callback) {
			callback(increased)
		}
	}, 1000)
}

increaseAndPrint(0, n => {
	increaseAndPrint(n, n => {
		increaseAndPrint(n, n => {
			increaseAndPrint(n, n => {
				increaseAndPrint(n, n => {
					console.log('작업끝 !');
				}
			}
		}
	}
}

Promise를 사용한 코드

// promise는 성공할수도 실패할수도 있습니다 성공할때는 resolve를 실패할때는 reject 를 호출합니다
const myPromise = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve('result');
	}, 1000)
})
// 1초뒤에 성공하는 함수
myPromise.then((result) => {
	console.log(result); // result
})

// 1초뒤에 실패하는 함수

const myPromise = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject(new Error());
	}, 1000)
})

myPromise.then((result) => {
	console.log(result);
}).catch(e => {
	console.log(e); // Error
})

Promise를 만드는 함수

// 값이 5가 된다면 실패 처리하는 함수
function increaseAndPrint(n) {
	// 새로운 Promise 를 만들어서 반환
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			const value = n + 1;
			if (value === 5){
				const error = new Error();
				error.name = ''
			}
		}, 1000)
	})
}

Promise 값이 1씩 증가하면서 5가 된다면 실패 처리하는 함수

// 값이 5가 된다면 실패 처리하는 함수
function increaseAndPrint(n) {
  // 새로운 Promise 를 만들어서 반환
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const value = n + 1;
      if (value === 5){
        const error = new Error();
        error.name = 'ValueIsFiveError';
        reject(error);
        return;
      }
      console.log(value);
      resolve(value);
    }, 1000)
  })
}

// 5번을 걸쳐서 숫자 1씩더하고 숫자가 5가된다면 Error발생
increaseAndPrint(0).then(n => {
  return increaseAndPrint(n)
}).then(n =>{
  return increaseAndPrint(n);
}).then(n => {
  return increaseAndPrint(n);
}).then(n => {
  return increaseAndPrint(n);
}).then(n => {
  return increaseAndPrint(n);
})
// 코드를 줄여보면
increaseAndPrint(0).then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .catch(e => {
    console.log(e);
})
// 이렇게 처리할수도 있습니다

사용하면 비동기 작업의 개수가 많아져도 코드의 깊이가 깊어지지 않습니다

하지만 문제가 있습니다 에러가 발생했을때 어느 부분에서 발생했는지 찾기가 쉽지 않고

다른 작업과 공유가 어렵다는 점이 있습니다