JavascriptのPromiseの使い方を初心者向けに解説

JavaScript

Promiseとは

Javascriptの非同期処理を制御するための仕組みです。非同期処理というのはAPI通信などが挙げられます。JavaScriptを書いたことがある方なら分かると思いますが、非同期処理を挟む処理ではプログラムが順番通りに実行されない場面が多々あります。例えば次のコードなどは順番が逆転してしまうコードです。(関数の一部を切り取ったコードです)

previewUrlが代入される前にreturnをしてしまいます。なのでPromiseを使って、previewUrlに代入されてからreturnするように書き換えると次のようになります。

Promiseを使うと、Promise内の処理が終わるまでその部分で待ってくれます。このようにして非同期処理の制御を簡単に実装できます。

Promiseの使い方 | 基本

引数はresolve, reject関数

Promiseの第一引数には関数を渡します。この関数というのは成功時の処理を実行する関数と、失敗時の処理を実行する関数の2つです。それぞれresolve, rejectと呼ばれる関数です。先程のプログラムでも成功時の処理をresolve関数を使って書いています。成功時の処理を書くというより、成功した時にPromise型として渡す値を書くといった方が理解できると思います。

Promiseはthenで受け取る

Promise内のresolveなどで処理された値を受け取るためにはthenを使う必要があります。次のプログラムを見てください。

番外:その他おすすめの記事

開発がもっと快適に、楽しくなるアイテムを紹介します。アイテム1つで開発の楽しさが全然変わるので、良いアイテムにはじゃんじゃんお金を投資すると良いですよ。

おすすめアイテム①

自分はオフィス次の2点の座布団と背もたれクッションを利用してます。姿勢が安定し、お尻への負担が激減します。オフィスにいるのに自宅で作業しているような感覚になるので気に入ってます。また疲労感もかなり減るので費用対効果が非常に高いアイテムです。

おすすめアイテム②

ブックスタンドみなさん使ってますか?PCを打ちながら参考書見る時に手で抑える必要がなくなるので非常に便利です。自分も購入した時なんでいままで使ってなかたんだろうと後悔したのでまだ持ってない方は買っておくと作業効率があがります。

おすすめアイテム③

PCスタンド、magic keyboard、magic mouseを購入してから、開発効率があがり、身体的負担が減って快適に開発ができるようになりました。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。初心者には最低限読んでおいて欲しい技術本をまとめました。例えば「リーダブルコード」などは技術力の高いエンジニアなら必ず過去に読んでいる本だと思います。

時短アイテム!日々の生活の質を上げる

日常生活における無駄を省く表品をまとめました。1日無駄な作業時間が10分発生するとしたら1年間で3600時間もその無駄な作業に時間を費やすことになります。このような魔の作業を消し去ってくれる商品をまとめました。。

気軽にお声かけください

このような形でほぼ毎日、情報発信を行ってます。技術的な部分で誤っている点などもあるかもしれません。その様な部分を発見した方はTwitterのDMなどで知らせていただければ凄い嬉しいです。また自身自身のエンジニアのネットワークを広げたいと思ってます。日頃六本木や渋谷にいることが多いですので気軽にお誘いください。情報交換しましょう。

筆者
筆者

今回の記事の内容は以上で終了です。最後まで読んでくれてありがとうございました。Twitterもやってるのでフォローしてくれたら嬉しいです!

タイトルとURLをコピーしました