Other
JavaScriptのfetchでGETやPOSTする方法(基本系)
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
オススメ本
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 から頂ければ幸いです。
それでは!