[ Vue.js ] Fetch を使って 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

Get 発行処理の実装

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 発行処理を実装していきます。


Post 発行処理の実装

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 開発ツール上で確認すると、 ステータスコード も 取得することができています。


まとめ

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

  • Vue.js から Fetch を用いて API に Get / Post リクエスト を発行可能
  • httpbin.org を用いて、 簡易的な APIテスト が可能 

関連記事

参照情報

Fetch の使用 – Web API | MDN

Fetch API + Vue.js でGoogle Books APIから取得した書籍情報を表示する

Postman Echo – Published Postman Templates