こんにちは、すぐるです！
sugulogをお読みいただきありがとうございます！！
このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準に書いています。
少しでもお役に立てれば幸いです。
今回は、JavaScriptとfetchメソッドいうことで
-
様々なデータを外部サーバーに送信してみよう
について簡単に解説します！！
その為このブログを読むことで、fetchメソッドについて理解が深まるのはもちろん、fetchメソッドで様々なデータを送信できるようになります。
是非最後までご愛読ください。
今回は、
・fetch()
・データを送信してみよう
の順で解説していきます。
では早速、みていきましょう！！
・fetch()
非同期通信でリクエストを発行しそのレスポンスを取得することができるメソッド。
fetchメソッドを使用することで、非同期通信で外部サーバーにアクセス(データ送信)しデータを取得することができます。
基本的な記述方法はfetch()の引数にアクセスしたいデータを返してくれる外部サーバーのURLを指定するだけです。
またfetchメソッドのレスポンスはPromiseオブジェクトとして扱います。
そのためレスポンス取得後(成功)にはthen()を使用し、リクエスト失敗(失敗)にはcatch()を使用し後続処理を定義することもできます。
もちろんasync/await構文を使用して記述することも可能です。
・データを送信してみよう
fetchメソッドを使いデータを送信する際にはデフォルトのGETで送る方法とPOSTで送る方法があります。
今回は送信データが見えないPOSTを利用し送信することを想定して解説していきます。
POSTで送信する場合、fetchメソッドの第二引数としてオプションを指定する必要があります。
このオプションにはmethod(送信方法)、headers(Content-Typeを指定、JSON等のデータ形態を指定する場合のみ)、body(送信データ)をオブジェクトで定義する必要があります。
それでは記述イメージについてみていきましょう。
1.JSONデータで送信
JSONのContent-Typeはapplication/jsonです。
またJSON形式でデータを送信するので、dataをJSON.stringify()でJSON形式に変換する必要があります。
2.Formデータ(new FormDate)で送信
new FromDataを使用しフォームデータとして送信する際、データはsetを使い第一引数にキー、第二引数に値を定義します。
またFormDataを使用するとContent-Typeはmultipart/form-dataとして自動的に定義されるため、headersとして定義する必要はありません。
この方法を使用するとサーバー側のPHPでは、$_POST["キー名"]として自動的に値が保存されています。
3.Formデータ(new URLSearchParams)
new URLSearchParamsを使用しフォームデータとして送信する際、データはsetを使い第一引数にキー、第二引数に値を定義します。
この送信方法は「キー＝値&キー＝値...」という形でデータを送信します。
またURLSearchParamsを使用する際はContent-Typeをapplication/x-www-form-urlencoded; charset=utf-8と定義する必要があります。
この方法を使用するとサーバー側のPHPでは、$_POST["キー名"]として自動的に値が保存されています。
以上3つの記述イメージを紹介しましたが、実際はAPIと連携しデータを送信、取得すると思います。
またAPIと連携してみたブログも後日記述しますので、そちらも是非ご確認ください！！
以上、今回のブログでした。
fetchメソッドについて理解が深まり、fetchメソッドで様々なデータを送信できるようになりましたか？？
APIと連携するための第一歩ですので、確実に理解していきましょう(^_^)/
最後に！！
今後も、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準にブログを書いていきます。
少しでも気になった方はお試しでもいいので1度、読者登録お願いします！
またTwitterでもプログラミングに関することを中心に情報を発信してます。
宜しければそちらのフォローもお願いします。
最後までご愛読いただきありがとうございました！！
こんにちは、すぐるです！
こんにちは、すぐるです！
こんにちは、すぐるです！
こんにちは、すぐるです！
こんにちは、すぐるです！
