友達との約束は必ず守り、待ち合わせ場所にも必ず5分前には到着している、ユゲタです。
約束大事ですよね。英語で言うと「Promise」
JavascriptでPromiseというと、非同期のcallback処理で、asyncとawaitと組み合わせることで、非同期処理を同機的に扱うことができるようにする処理。
ちなみに、Javascriptを仕事などで使っている人で、この内容が理解できる人だけ、この先の内容を読んでください。
それ以外の人は、内容が珍紛漢紛で、全くなんの役にも立たない内容なので、読まない方がいいかと思います。
※学習中の人は、読んで頑張って理解してみてください。
事前の話
ここでは、Promiseとか、非同期が何でどんな仕様なのかという事は説明しません。
プログラミング初心者の人が、Javascriptを難しく感じる要因の一つに非同期処理があるということは間違い無いでしょう。
よほど簡単なことしかしないJavascriptであれば、非同期なんてどうでもいいんですが、
ホームページをサーバーにおいてあるデータと連携させたり、Nodejsでのポーリング処理を行う場合は、非同期処理が必須です。
ユゲタがよくやる処理としては、ローカルデータをアップロードしたり、ブラウザでこねくり回す処理を行う際に、Blobというデータが出てきて、
これをJavascriptで使える状態に変換する処理で、onloadからのcallback処理が必要になり、ここでPromiseを使って、返り値を求める様にしています。
Promiseサンプル
とりあえず、Promiseの書き方や基本構造を理解するために、次のサンプルコードを用意してみました。
(async function(){
const res = await a(2)
console.log(res)
})()
async function a(num){
return await new Promise((resolve) => {
setTimeout((function(){
console.log('finish')
resolve(num * 100)
}), 2000)
})
}
setTimeoutという非同期処理を実行した値をreturnさせたい時の処理として作ってみたんですが、ここで覚えておかないといけないポイントは、
async、await、promise、resolve、です。
Promise自体をawaitで待ち受けてreturnすることで、非同期の値を返すことができますが、それを受け取る側も、awaitで待ち受けていないければいけない点も要注意ポイントです。
さらにawaitを使う関数もasyncをセットしておかないといけないので、なんともネストの深い処理が重なって毎度めんどくさい思考が必要になるんですね。
最後に
とりあえず、このスニペットをコピペして今後使えば、ある程度まとまった処理としてフローが作りやすくなると思うので、忘れた時の為の自分向け備忘録として書き残しておきます。
ちなみに、Promiseで受け取った値を.thenでさらに数珠繋ぎで書く方法もあるので、何がどう効率化はそれぞれのプログラムの構成にお任せするとして、基本を押さえておくことが重要という再認識をするための自分戒め記事でした。
そして、約束を破る友達は、生涯ブロックをするようにしているユゲタは厳しすぎますかね？
