ホーム > Other > JavaScriptのfetchでGETやPOSTする方法（基本系）
Other

JavaScriptのfetchでGETやPOSTする方法（基本系）

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. 結論
  2. 解説
  3. まとめ
PR

JavaScript の fetch で GET や POST する方法（基本系）についてまとめました。

⇨ Vue 記事の目次はこちら ⇨ React 記事の目次はこちら

結論

GET

function test() {
  fetch("/test")
    .then(response => response.json())
    .then(data => {
      console.log(data)
    })
    .catch(err => {
      console.log(err)
    })
}

POST

function test() {
  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      //ここに送るデータを書く
      //name: 'なまえ',
      //title: 'タイトル'
    }),
  })
    .then(response => response.json())
    .then(data => {
      console.log(data)
    })
    .catch(err => {
      console.log(err)
    })
}

Laravel の CSRFtoken を付与する

function test() {
  fetch(url, {
    method: "POST",
    headers: {
      "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      //ここに送るデータを書く
      //name: 'なまえ',
      //title: 'タイトル'
    }),
  })
    .then(response => response.json())
    .then(data => {
      console.log(data)
    })
    .catch(err => {
      console.log(err)
    })
}

解説

書き方自体は、Ajax や axios とほぼ変わらないので、違和感はないと思います。

が、レスポンスのデータを使う時、

.then((response) => response.json())
    .then((data) => {
      console.log(data);
    })

このように、一度レスポンスを.json()で、結果を読み取る必要があります。

まとめ

以上です。

ドキュメントのこのページに、かなり詳しく書いてありますが、必要最低限の例として上げてみました。

誰かの参考になればと思います。

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは！

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。