JavaScript
JavaScript非同期通信でfetch(フェッチ)を使うのは便利です。特になにも気にせずに fetch(フェッチ)を使っていたのですが、使っているうちに疑問がでてきたので、独自に調べたことを共有します。特にfetch(フェッチ)と Promise(プロミス)の定義や関係性がいまいち、よくわかっていなかったので、、、いろいろ調べた結果、ほぼほぼ理解したので、よかったら参考にしてください。
fetchとPromiseそれぞれの基本的概念
fetch(フェッチ)の基本概念
fetch(フェッチ)は、関数です。このfetch関数はHTTPリクエストを送信し、レスポンスをPromise(プロミス)オブジェクトで返します。
fetch関数はHTTPリクエストを送信し、レスポンスを取得するための非同期関数ということです。通信が非同期なので、結果が返ってくるまで待たなくても、他のコードを続けて実行ができます。
Promise(プロミス)の基本概念
Promise(プロミス)は、オブジェクトです。これは、将来のある時点で完了する(または失敗する)非同期処理を表します。fetch関数は、Promiseオブジェクトを返すため、レスポンスが返ってくるときに、thenやcatchを使って処理を行います。
非同期処理とは
なにかの処理の終わりを待たずに、別の処理を実行することを
ざっくりいうと、なにかのデータをリクエストしたら、その結果を待って順番に処理をすることを同期処理という。これに対し、データをリクエストしたら、その結果を待たずに、別の処理を進めることを非同期処理という。
もっとざっくりいうと、同期処理というのは、炊飯器でご飯が出来上がった後に、カレーを作り出す状態ということで、非同期処理というのは、炊飯器でご飯を炊きながら、カレーを作っている状態のことです。
ご飯ができあがるまで、カレーを作ることができない同期処理と比べると、非同期処理の方が効率が良い、ということが分かると思います。
fetchとPromiseの違い
fetch(フェッチ)は関数です
fetchはPromiseを返す非同期関数です。
fetchはPromiseを返す関数なので、new Promise()を使って再度構造を作る必要はありません。
fetchは内部で非同期処理を行い、その結果をPromiseオブジェクトとして返しているため、thenやcatchを使って結果やエラーを処理できます。
Promise(プロミス)はオブジェクトです
Promiseは、非同期処理の結果をラップしたオブジェクトです。
fetch関数を呼び出すと、自動的にPromiseが返されるので、そのままthenやcatchを使って処理を続けることができます。非同期処理の結果が返ってくるまでの間、状態(Pending, Fulfilled, Rejected)を持っています。
new Promise()とは
new Promise()はJavaScriptにおけるPromiseオブジェクトを作成するための構文です
new Promise()構文はコンストラクタ関数として動作し、Promiseオブジェクトを作り出します。このPromiseオブジェクトは、非同期処理を表し、その処理が成功(resolve)するか失敗(reject)するかを待つことができます。
コンストラクタ関数とは
新しいオブジェクトを生成するために使われます。クラスのようにオブジェクトのプロパティやメソッドを設定する役割を持っています。
コンストラクタ関数と普通の関数の違いは、主に関数の使い方とその目的にあります。特に、コンストラクタ関数は、 新しいオブジェクトを生成するために使われます。オブジェクトを生成するために使われる特別な関数でクラスのようにオブジェクトのプロパティやメソッドを設定する役割を持っています。
また、コンストラクタ関数の場合はnewキーワードを使って呼び出され、新しいオブジェクトを生成します。newを使わないと、ただの普通の関数として動作します。ちなみに普通の関数は特定の処理やタスク(主にデータを操作したり、計算を行ったりする関数)を実行するために使われます。
コンストラクタ関数の特徴
コンストラクタ関数は、名前を大文字で始めるのが一般的な慣習です(例: Person, Car, Promiseなど)
newキーワードを使うと、自動的に新しいオブジェクトが生成され、そのオブジェクトがthisとして関数の内部で使われます。
関数の最後にreturnを明示的に書かなくても、自動的に新しいオブジェクトが返されます。
なので、fetchを使わずにコンストラクタ関数でPromiseオブジェクトを作成したいときは、new Promise() という構文を使います。
●●●●
xxxxxxxxxxxxx
fetchはPromiseを返す非同期関数です。
fetchはPromiseを返す関数なので、new Promise()を使って再度構造を作る必要はありません。fetchは内部で非同期処理を行い、その結果をPromiseオブジェクトとして返しているため、thenやcatchを使って結果やエラーを処理できます。
zzzzzzzzzzzzzz
Promiseは、非同期処理の結果をラップしたオブジェクトです。
fetch関数を呼び出すと、自動的にPromiseが返されるので、そのままthenやcatchを使って処理を続けることができます。非同期処理の結果が返ってくるまでの間、状態(Pending, Fulfilled, Rejected)を持っています。
まとめ
- 非同期でfetch(フェッチ)でPHPと通信はとても便利です
- 非同期処理というのは、炊飯器でご飯を炊きながら、カレーを作っている状態のこと
- PHPで非同期処理をしたいならfetch(フェッチ)を使いましょう
- PHP単体では非同期処理はできません
- JavaScript以外でも非同期通信を行うことは可能です