Promiseとは・非同期処理時にPromiseを使うメリットとは

##Promiseとは
非同期処理のコードを扱いやすくするもの。
Promiseを用いると、非同期処理のコールバックの扱いがより簡単になる。

##Promiseを使った実装・使わない実装

・Promiseを使わずに実装

//doWorkCallback関数の定義
const doWorkCallback = (callback) => {

//非同期処理。2秒後に[1,2,3]を返す
setTimeOut(() => {
callback(undefined, [1,2,3])
}, 2000)
}

//doWork関数の実行
//第一引数：エラー時の返り値、第二引数：処理成功時の返り値
doWorkCallback((error, result) => {

if(error){
return console.log(error)
}
console.log(result)
})

↓
２秒後に[1,2,3]が返る
または、2秒後にerrorが返る

・Promiseを使って実装

//doWorkPromise関数の定義
const doWorkPromise = new Promise((resolve, reject) => {

//非同期処理。2秒後に[1,2,3]を返す
setTimeOut(() => {


//処理成功時の処理をresolve関数として実装
resolve([1,2,3])

//エラー時の処理をreject関数として実装
reject('Things went wrong')
}
},2000)

//doWorkPromise関数の実行
//成功時の処理を、「.then()」をつなげることによって記述
doWorkPromise.then((result) => {
console.log('success', result)

//エラー時の処理を、「.catch()」をつなげることによって記述
}).catch((error) => {

console.log('Error',error)
})

↓
2秒後に「success, [1,2,3]」が返る
または、2秒後に「Error Things went wrong」が返る

##Promiseを使用するメリット

Promiseを使って実装すると・・・

①成功時の処理はresolve関数、エラー時の処理はreject関数と、２つの別々の関数て処理している為、何が起こっているかわかりやすい。

Promiseを使わないと：　関数１つで成功時とエラー時の処理を行うことになる、
コールバックの全ての呼び出しを調べてから、引数errorと引数result、どちらが提供されたか判断することになる。

②処理結果によって呼び出される関数はresolve関数かreject関数かのどちらか一つ。
呼び出されるとPromiseは終了する為、後から実行結果の値や状態が上書きされることがない。

Promiseを使わないと：　コールバックが２回呼び出され、結果が変わるリスクがある。

##Promise処理中におこっている事

Promiseが作成される
↓
Pending:非同期処理実行中。Promiseの結果は保留
↓
①fulfilled:処理成功
②rejected:処理失敗

##Promiseをチェインさせる
複数の非同期メソッドをつなげて処理を行う時、Promiseをチェインさせて書くことができる。

・Promiseチェインを使わず実装

//add関数の定義。Promiseを使った非同期処理とし、２秒後にa+bの結果を返す
const add = (a, b) => {
  return new Promise ((resolve, reject) => {
    setTimeout(() => {
      resolve(a + b)
    }, 2000)
  })
}

add(1, 2).then((sum) => {　　
  console.log(sum)

  add(sum, 5).then((sum2) => {　　//add関数で、「add(1,2)の結果」と「5」を処理する
    console.log(sum2)
  }).catch((e) => {
    console.log(e)
  })
  
}).catch((e) => {　　//add(1,2)のエラー処理
  console.log(e)
})

↓
２秒後に「3」、さらに２秒後に「8」が返る

・Promiseチェインを使って実装

//add関数の定義。Promiseを返し、２秒後にa+bの結果を返す
const add = (a, b) => {
  return new Promise ((resolve, reject) => {
    setTimeout(() => {
      resolve(a + b)
    }, 2000)
  })
}

add(1,1).then((sum) => {
  console.log(sum)
  return add(sum, 4)　　//add関数で、「add(1,1)の結果」と「4」を処理する。2つ目の非同期処理を　returnで返すようにしている
}).then((sum2) => {　　//2つ目の非同期処理を「.then()」で返す

  console.log(sum2)
}).catch((e) => {　
  console.log(e)
})

↓
２秒後に「２」、さらに２秒後に「６」が返る

・Promiseチェインを使うメリット

①ネストを深くせずに、複数の非同期処理を繋げて行える ②エラー時の処理コードを重複して書かなくてすむ

##Promiseを更に理解するために今後学習したいこと

「JavaScript Promiseの本」
https://azu.github.io/promises-book/

##参考文献
「The complete Node.js Developer Course」
https://www.udemy.com/share/101WGiAEIedVpTTX4D/