JavaScriptのpromiseの使い方

みなさんこんにちは、かじりです。この記事はJavaScriptのpromiseを解説しています。 上に書いてあることを見逃すと下はわかりづらいと思うので上から読んで欲しいです。

JavaScriptのPromiseの簡単な例

ここからは当分、devtoolやplaygroundで実行してもlogが出力されません。ご注意ください。上から順に繋がっているので飛ばさずに読んでもらえるとわかりやすいと思います。

また、順番として先にfunctionがわかったほうが理解が楽だと思います。functionがちょっと自信ない方はこちらを先に読んでおくとわかりやすくなると思います。

一応完成形を先に記載しておきます。

new Promise(function(resolutionFunc){
  resolutionFunc('hello')
}).then(function (result){
  console.log(result)
})

一番簡単なJavaScriptのPromiseの書き方

１番簡単なPromiseの書き方はこれだと思います。

new Promise()

これがPromiseの一番簡単な書き方です。

JavaScriptのPromiseの引数について

先ほどのnew Promise()ですが、引数を受け取ることができます。

mdnというJavaScriptの公式サイトのようなものに書いてあるので引用します。

new Promise(executor)

このように、new Promise()はexecutorを引数に受け取ることができます。ここが重要です。new Promise()はexecutorを引数に受け取ることができます。

ではexecutorとはなんでしょうか。

JavaScriptのPromiseの引数に渡すexecutor

executorもmdnというJavaScriptの公式サイトのようなものに書いてあるので引用します。

function(resolutionFunc){
  resolutionFunc(1) // 数値以外も渡せる
}

このようにexecutorとはresolutionFuncを引数に受け取るfunctionです。

ここが重要です。executorとはresolutionFuncを引数に受け取るfunctionです。

ではresolutionFuncとは何かというと引数を受け取ることができるfunctionです。最後の方では重要な役割をはたしますが今は引数を受け取ることしかできません。

executorを引数に受け取るnew Promise()

上で書いたように

new Promise()はexecutorを引数に受け取ることができます。

となっており、上で説明したように、これがnew Promise()

new Promise(executor)

これがexecutorでした。

function(resolutionFunc){
  resolutionFunc(1) // 数値以外も渡せる
}

ちょっとわかりやすくするためにexecutorの改行を消します。

改行を消したexecutorはこのようになります。

function(resolutionFunc){ resolutionFunc(1) }

先ほど書いたように、new Promise()はexecutorを引数に受け取ることができる。なので以下のようにできます。

new Promise(function(resolutionFunc){ resolutionFunc(1) })

みてみると、new Promise()の引数にexecutorが書いてあるだけだと思います。

これで、先ほど書いていた

new Promise()はexecutorを引数に受け取ることができます。

を達成することができました。

JavaScriptにconsole.hogeってあるの？

後に出てくる文章をわかりやすくするために挟んでいます。決して不要なものではないです。

JavaScriptには後ろに繋げて実行できるものがあります。例えばconsole.logです。consoleとlogを.で繋げていますね。

console.log(1)

ではconsole.hogeはないのでしょうか？これをtypeofで調べたいと思います。typeofは型を調べてくれます。1ならnumber。'hello'ならstringという感じです。まずはconsole.logからです。注意ですが、console.log()ではないです。console.logです。

console.log(typeof console.log)

どうでしょうか、functionと出力されたと思います。 console.logは引数を受け取るfunction。なのでfunctionと出力されました。次にconsole.hogeです

console.log(typeof console.hoge)

undefinedと出力されたとおもいます。このように存在しないものだとundefinedが出力されます。

new Promise()に繋げて実行できるのは?

先ほど使用したnew Promiseとexecutorを合わせたものが以下です。

new Promise(function(resolutionFunc){ resolutionFunc(1) })

後ろにhogeをつけます。

new Promise(function(resolutionFunc){ resolutionFunc(1) }).hoge

これにtypeofをしたいと思います。

console.log(typeof new Promise(function(resolutionFunc){ resolutionFunc(1) }).hoge)

undefinedと表示されたと思います。

では次に、hoegをthenにしてtypeofをしたいと思います。

console.log(typeof new Promise(function(resolutionFunc){ resolutionFunc(1) }).then)

functionと表示されたと思います。このようにthenがfunctionであることがわかりました。

１行にしていたので改行を戻してみます。

new Promise(function(resolutionFunc){
  resolutionFunc(1)
}).then

このようにして、thenを使うことができます。では、thenとはなんでしょうか。

thenとは何か

thenは引数にfunctionを受け取ります。

new Promise(function(resolutionFunc){
  resolutionFunc(1)
}).then( function () {} )

先ほど記載したものがこちらです。

new Promise(function(resolutionFunc){
  resolutionFunc(1)
}).then()

見比べるとわかりやすいと思います。

thenとはこのように使うことができます。もっと詳しくみてみましょう。

thenで引数を受け取る

thenの引数に書いたfunctionは引数を受け取ることができます。

new Promise(function(resolutionFunc){
  resolutionFunc(1)
}).then( function (result) {} )

先ほどの例と比べてみましょう。

new Promise(function(resolutionFunc){
  resolutionFunc(1)
}).then( function () {} )

このように引数を受け取ることができます。ではresultを表示してみましょう

thenで受け取った引数をconsole.logする

先ほどはこのようになっていました。

new Promise(function(resolutionFunc){
  resolutionFunc(1)
}).then( function (result) {} )

resultをconsole.logしたいと思います。

new Promise(function(resolutionFunc){
  resolutionFunc(1)
}).then( function (result) { console.log(result) } )

1と表示されたと思います。どの1でしょうか？次にhelloと表示するとしたらこのようになります。

new Promise(function(resolutionFunc){
  resolutionFunc('hello')
}).then( function (result) { console.log(result) } )

このように、resolutionFuncの引数に入れたものがconsole.logで出力されました。1行が長く、みづらくなってきたので、改行したいと思います。

new Promise(function(resolutionFunc){
  resolutionFunc('hello')
}).then(function (result){
  console.log(result)
})

改行が完了しました。以上でnew Promiseとthenの使い方が終わりました。以下は番外編です。細かく区切ったので長くなりました。理解しやすくかけていればいいなぁ。

JavaScriptのPromiseの難しい例

こちらは先ほどの応用を紹介します。

rejectionFunc

rejectionFuncについて説明します。

resolutionFuncに似ていますね。同じように使うことができます。

new Promise(function(resolutionFunc, rejectionFunc){
  rejectionFunc('hello')
}).then(function (result){
  console.log(result)
})

どうでしょうか、helloと出力されませんね。もう一箇所変更する必要があります。

new Promise(function(resolutionFunc, rejectionFunc){
  rejectionFunc('hello')
}).catch(function (result){
  console.log(result)
})

これでhelloと表示されたと思います。

このように、rejectionFuncを使った場合、thenをcatchに変更する必要があります。

thenとcatchとresolutionFuncとrejectionFuncを同時に出力したい

では、これを実行してみましょう。先ほどまでのものを全部繋げました。helloが２つだとわかりづらいのでhello1, hello2にしました

new Promise(function(resolutionFunc, rejectionFunc){
  resolutionFunc('hello1')
  rejectionFunc('hello2')
}).then(function (result){
  console.log(result)
}).catch(function (result){
  console.log(result)
})

hello1と表示されたと思います。resolutionFuncとrejectionFuncはどちらか先に実行されたらそこで終了します。なので、hello2は表示されませんでした。thenを消すとどうなるでしょう？

new Promise(function(resolutionFunc, rejectionFunc){
  resolutionFunc('hello1')
  rejectionFunc('hello2')
}).catch(function (result){
  console.log(result)
})

何も表示されませんね。resolutionFunc('hello1')はthenで使うことができます。 rejectionFunc('hello2')はcatchで使うことができます。 また、先に実行されたのがresolutionFuncなので、rejectionFuncは実行されませんでした。 なのでhello2は表示されませんでした。

executorを切り出してみる

ちょっと戻って、resolutionFuncだけの例を持ってきました。

new Promise(function(resolutionFunc){
  resolutionFunc('hello')
}).then(function (result){
  console.log(result)
})

これのexecutorを切り出すと、以下になります。

const executor = function(resolutionFunc){
  resolutionFunc('hello')
}

new Promise(executor).then(function (result){
  console.log(result)
})

thenも切り出してみましょう

const executor = function(resolutionFunc){
  resolutionFunc('hello')
}

const then = function (result){
  console.log(result)
}

new Promise(executor).then(then)

promiseも切り出してみましょう。

const executor = function(resolutionFunc){
  resolutionFunc('hello')
}

const then = function (result){
  console.log(result)
}

const promise = new Promise(executor)

promise.then(then)

これでもhelloと表示されたと思います。このようにfunctionを切り出すことができるので頭の片隅にでも残しておいてもらえればと思います。

以下の記事も参考になるかもしれません