Vue.jsでFetchを使ったHTTPリクエスト方法【GET/POSTの実装ガイド】

Vue.js を用いて HTTP Get や Post を発行する方法はいくつか存在しますが、本記事では Fetch を用いて Vue CLI プロジェクトから HTTP Get / Post を発行する方法について整理していきます。

@vue/cli 4.5.13
npm: 7.24.0
node: v14.17.0

[ads]

Get 発行処理の実装

[ads]

Vue CLI プロジェクトの作成

まずは、 Vue CLI プロジェクトを作成していきます。今回は Vue 3 で作成したプロジェクトを用いることにします。

Vue CLI v4.5.12
┌───────────────────────────────────────────┐
│                                           │
│   New version available 4.5.12 → 4.5.13   │
│                                           │
└───────────────────────────────────────────┘

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

続いて、今回 Get / Post を実装する Fetch.vue という名称のコンポーネントを準備します。 Get / Post のテスト先として httpbin.org というテストサイトを利用することにします。

こちらのサービスでは、5種類の HTTP Method を提供していますが、今回は以下の 2 つを利用させていただくことにします。

/get
/post

引用元: https://httpbin.org/#/HTTP_Methods

Fetch.vue Template 部分の作成

今回は Get パラメータとして名前 (name) と年齢 (age) の2つを持つ Get Request を発行してみます。

<template>
 <div>
   <h2>Get</h2>
   <label
     >Name<input class="form-control" type="text" placeholder="name" v-model="name"
   /></label>
   <br />
 
   <label
     >Age <input class="form-control" type="number" placeholder="age" v-model="age" />
   </label>
 
   <br />
   <!-- Exec button and show result -->
   <input class="btn btn-primary" type="button" value="Get" @click="execGet" />
   {{ resGet }}
 </div>
</template>

npm run serve を用いて実行すると以下の UI が表示されます。

Fetch.vue Script 部分の作成

続いて、Get ボタンをクリックすることで Fetch を使って Get を発行する部分を実装します。

Get パラメータには UI の Name, Age の値をそれぞれ用います
API のレスポンスを resGet に、ステータスコードを statusGet に格納していきます。

<script>
export default {
 data() {
   return {
     name: "David",
     age: 25,
     resGet: null,
     statusGet: 0,
   }
 },
 methods: {
   execGet() {
     let url = new URL("https://httpbin.org/get")
 
     let params = {
       name: this.name,
       age: this.age,
     }
     url.search = new URLSearchParams(params).toString()
     fetch(url)
       .then((response) => {
         this.statusGet = response.status
         return response.json()
       })
       .then((data) => {
         this.resGet = data
       })
   },
 },
}
</script>

これで、 Get を発行する準備が整いましたので、早速実行してみます。

Vue.js プロジェクトから Get 発行

この状態で実行します。レスポンスの値が取得され、表示することができました。
なお、レスポンスには IP アドレスを含むため、一部割愛しています。

それでは、引き続き Post 発行処理を実装していきます。

[ads]

Post 発行処理の実装

[ads]

Fetch.vue Template 部分の作成

先程作成した Template に以下の Post 発行用の UI を追加します。

   <h2>Post</h2>
   <label
     >Description <input type="text" name="description" value="Hi! This is John."
   /></label>
 
   <br />
   <!-- Exec button and show result -->
   <input class="btn btn-primary" type="button" value="Post" @click="execPost" />
   {{ resPost }}

追加後の UI は以下のようになります。

Script 部分の作成

先程作成した execGet 同様 methods に execPost を追加していきます。また data にも必要な要素をあわせて追加します。

   execPost() {
     let url = new URL("https://httpbin.org/post")
     fetch(url, {
       method: "POST",
       body: this.description,
     })
       .then((response) => {
         this.statusPost = response.status
         return response.json()
       })
       .then((data) => {
         this.resPost = data
       })
   },

Post ボタンをクリックすると以下を表示します。data 部分に意図通り値がセットされていることがわかります。

Vue 開発ツール上で確認すると、ステータスコードも取得することができています。

[ads]

まとめ

[ads]

今回は Localhost から簡易的に API を発行するといったことを実施しましたが、 httpbin.org 以外の多くの API サービスでは No ‘Access-Control-Allow-Origin’ として http://localhost が許容されていないため、fetch が COR エラーとなってしまう点に注意してください。