Vueのaxiosのgetとpostの基本的な書き方
いつもご利用ありがとうございます。このブログは、広告費によって運営されています。
まず、この記事の趣旨としては、世の中にはいろんな Vue、axios の記事があると思うんですが、その中でも最もシンプルな例を分かりやすく書こうと思いました。
色々な書き方がある中で一番よく見かける形のものを紹介していきます。
基本的な書き方 GET
GET はこのような書き方
.vue ファイル
<template>
<div>
<div v-for="post in posts">
<p>{{post.title}}</p>
<p>{{post.content}}</p>
</div>
</div>
<template>
<script>
export default {
data() {
return {
posts: [],
};
},
created() {
this.test();
},
methods: {
test: function () {
axios
.get("/test")
.then((res) => {
console.log(res);
this.posts = res.data.posts;
})
.catch((err) => {
console.log(err);
});
},
},
};
</script></template
></template
>基本的な書き方 POST
<template>
<div>
<input v-model="title" />
<textarea v-model="content"></textarea>
<button type="button" @click="test">送信</button>
</div>
</template>
<script>
export default {
data() {
return {
title: "",
content: "",
};
},
methods: {
test: function () {
axios
.post("/test", {
title: this.title,
content: this.title,
})
.then((res) => {
console.log(res);
this.posts = res.data.posts;
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>GET の解説
GET は主にデータの取得で使っていきます。
test: function(){
axios.get('/test').then(res=>{
console.log(res)
this.posts = res.data.posts
}).catch(err=>{
console.log(err)
})
}このコードの中の
axios.get('/test')ここの 1 行で用意された URL（エンドポイントなんて言われたりもします）にデータをくださいと言っています。
.then(res=>{
console.log(res)
this.posts = res.data.posts
}).then の中には、URL に「データをください」をした結果、成功した内容を書きます。
今回で言うと、何が返ってきたのかを確認する
console.log と、 返ってきた posts のデータを Vue のデータに持たせています。
.catch(err=>{
console.log(err)
})catch は「データください」が失敗した時の記述になります。 ここは色々書けますが、今回ははしょります。
これで基本的な axios の get の関数が出来上がりました。
しかし、これではだめです。
関数は定義しただけだと動かないので発動させる必要があります。
created() {
this.test()
},この部分で、いま作成した関数を発動させています。 created()はコンポーネントが呼ばれた時に発動する関数です。 直接この中に書くこともできるのですが、今回は、
this.test()とかいて、定義した関数を呼び出しています。
data(){
return {
posts: []
}
},この部分で、このコンポーネントで使うデータを定義しつつ、初期値を書いています。
これがないと、「データをください」が成功しても、そのデータを受け取る場所がないのでエラーになってしまいます。
今回は、空の配列を初期値として入れています。
<template>
<div>
<div v-for="post in posts">
<p>{{post.title}}</p>
<p>{{post.content}}</p>
</div>
</div>
<template>表示の部分です。v-for で配列の数だけ表示を回しています。
POST の解説
次に、テキストを入力して、「送信」を押したらデータが入力されるようなものを作っていきます。
methods: {
test: function(){
axios.post('/test',{
title: this.title,
content: this.title
}).then(res=>{
console.log(res)
this.posts = res.data.posts
}).catch(err=>{
console.log(err)
})
}
},また分解して説明していきます。
axios.post('/test',{
title: this.title,
content: this.title
})ここは、/test と言う URL（エンドポイント）に対して post 送信しますよと言うものになります。
そして、第二引数の
{
title: this.title,
content: this.title
}ここで、送信するデータを書いています。
オブジェクトの key が name となって、右側が Value になります。
Laravel でいえば、
$request->title と書けば、 this.title の中身が伝わってきています。
.then と、.catch に関しては GET の時と同じです。
レスポンスがどのようになっているかは API 側の仕様なので、Console で中身を見ながら書いていくと思います。
data(){
return {
title: '',
content: ''
}
}GET の時と同じように、送信するテキストの受け皿的なところを定義します。
初期値は、空のテキストと言うことで”とかいています。
<template>
<div>
<input v-model="title">
<textarea v-model="content"></textarea>
<button type="button" @click="test">送信</button>
</div>
<template>input や textarea に対して、v-model を使って、先ほど data()に定義した title と content のところが、入力されたデータと同じになるようになっています。
まとめ
Vue の axios の GET と POST の基本的な記述をサンプルとして書いてみました。
最初は慣れるまで大変だと思いますが、一番最初にこれをみた人がわかりやすければ幸いでございます。
この記事に関する質問は、Twitter で DM してもらえればと思います。
それでは。
