javascript-fetch-post

JavaScript

fetch-post

Fetch API

昨日 jsonserver で立てたものもをそのまま使用します。

パラメータ無しで POST

curl -X POST http://localhost:3000/posts/
[
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  },
  {
    "id": 2,
    "title": "json-server2",
    "author": "typicode2"
  }
]

パラメータ付き

curl -X POST -d "id=2" http://localhost:3000/posts/
{
  "id": 2,
  "title": "json-server2",
  "author": "typicode2"
}

Fetch を使って取得する場合はこんな感じ。
別で id を入れるテキストボックスと、送信ボタンがある html ファイルを作っています。

const post = (url, param) => {
  return fetch(url, {
    method: "POST",
    body: JSON.stringify(param),
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((res) => {
      if (!res.ok) throw Error();
      return res.json();
    })
    .catch((error) => "エラーが発生しました");
};

const getPosts = async () => {
  const url = "http://localhost:3000/posts/";
  const id = document.querySelector("#id").value;
  const param = { id };
  console.log(await post(url, param));
};

const postSubmit = document.querySelector("#post");
postSubmit.addEventListener("click", getPosts);

実行結果はこんな感じ。

//id1で送信
{id: 1, title: 'json-server', author: 'typicode'}
//id2で送信
{id: 2, title: 'json-server2', author: 'typicode2'}
//パラメータ無しで送信
(2) [{…}, {…}]
0: {id: 1, title: 'json-server', author: 'typicode'}
1: {id: 2, title: 'json-server2', author: 'typicode2'}
//id3で送信※404
エラーが発生しました

post

fetch の第 2 引数には色々設定を付与することができます。
第 2 引数がない場合は GET で投げられるので、POST の場合は第 2 引数で色々設定していきます。
もちろん、GET でも認証情報を送る場合等、必要な場合は第二引数を設定します。

method

method: "POST"の部分。見たままですが、メソッドを POST で指定しています。

body

body: JSON.stringify(param)の部分。ここも見たままですが、POST で送るパラメータを設定します。

headers: {}

ヘッダー情報を付与することもできます。今回は application/json だけ。
他にも、ベーシック認証が必要な場合等もここに書いていくことになります。

その他

他の部分は GET の時とほとんど変わりません。エラーがあったらエラーテキストを投げ、正常な場合は res.json()で結果を返しています。

色々なパラメータ

その他にも色々設定することができます。 ブラウザの認証情報を一緒に投げる credentials や、cache の設定等、必要なものを追加していきましょう。