[JS]Promise

Promiseとは?
PromiseはES 6に導入された機能で、非同期操作をより容易にすることができます.
以前は、非同期の雑用を扱う場合、このタスクを完了した後、あるタスクを処理する際にコールバック関数を使用して処理するはずでしたが、コールバック関数が多すぎるとコードが乱雑になるため、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値が5の場合、失敗関数の値は1になります.

// 값이 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);
})
// 이렇게 처리할수도 있습니다

使用する場合、非同期操作の数が増えてもコードの深さは深くなりません.
しかし、エラーがどこで発生したのかを見つけるのは難しいという問題があります.
他のタスクと共有するのは難しい