Other

JavaScriptのfetchでGETやPOSTする方法(基本系)

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

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 から頂ければ幸いです。

それでは!