Promiseを完全に理解した

はじめに

ちょっとできるになりたいです。 伝わるかな？

なんで書いた？

1年前にPromiseを学習したときは、なんとなくの理解だったが、この度使う機会があり理解できた。
当時作成していたPromiseのメモをリファクタリングしたのでQiita上でも更新しようと思う

Promiseとは？

非同期処理を同期処理のように扱える(上から順に実行)
Promiseが動かない場合resolveを実行しているか確認する

基本

let promise = () => {
  return new Promise(resolve, reject) => {
    // ここで時間のかかる非同期処理をする
    // 最後にresolve()する
    // resolveの実引数をthenに渡せる
  }
}

promise()
.then(() => {
  // 処理
})

// thenの処理はpromiseを含む関数がresolveを
// returnした後に実行される

関数化しない方法

説明も詳しく

// 下記のように書く場合returnは不要
// const promise = は省略可能 いきなりnew Promiseから始めても可
// 基本で紹介したように関数にする場合はPromiseの結果を外にreturnする必要があった
const promise = new Promise(resolve, reject) => {
  // executor (時間のかかる処理)
}
.then(() => {
  // 処理
})

catch

エラーの場合のみ呼び出される

new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error("エラー!!"))
  }, 1000)
})
.catch(alert) //1秒後に "エラー!!" を表示

fainally

Promiseの最後に必ず実行される

new Promise((resolve, reject) => {
  setTimeout(() => resolve(console.log('1秒たった')), 1000)
})
// 結果が確定したら最後に必ず実行される
.finally(() => {
  console.log('done')
})

resolveの実引数を繋げる

new Promise((resolve, reject) => {
  setTimeout(() => resolve("tee"), 1000)
})
.then((data) => {
  console.log(data)

// 次のthenでresolveの結果を使うにはreturnする
  return data
})
.then((data) => {
  console.log(data)
})