Vue.js勉強記録その30 外部サービスを利用しよう 6-1 ver2

Vue.js3超入門

こちらの書籍で勉強中です。

今回は、axiosを使ってjsonデータを取得します。

■axiosで外部サイトにアクセス！

・JSONデータを使ってみる

以下のサイトから、ダミーのJSONを使ってJSONデータを使ってみます。

JSONPlaceholder - Free Fake REST API

JSONPlaceholderは、以下のようにデータを取得できます。

全データ（100件）所得
https://jsonplaceholder.typicode.com/posts

指定のID番号のデータを取得
https://jsonplaceholder.typicode.com/posts/番号

・指定したidのデータの取得

HelloWorld.vue

<template>
 <section class="alert alert-primary">
   <h1>{{ data.title }}</h1>
   <p>{{ data.message }}</p>
   <table class="table table-light table-striped">
     <tbody class="text-left">
       <tr>
         <th style="width: 200px">User ID</th>
         <td>{{ data.json_data ? data.json_data.userId : "-" }}</td>
       </tr>
       <tr>
         <th>ID</th>
         <td>{{ data.json_data ? data.json_data.id : "-" }}</td>
       </tr>
       <tr>
         <th>Title</th>
         <td>{{ data.json_data ? data.json_data.title : "-" }}</td>
       </tr>
       <tr>
         <th>Body</th>
         <td>{{ data.json_data ? data.json_data.body : "-" }}</td>
       </tr>
     </tbody>
   </table>
 </section>
</template>

<script>
import axios from "axios";
import { reactive, onMounted } from "vue";
let url = "https://jsonplaceholder.typicode.com/posts/";
export default {
 setup(props) {
   const data = reactive({
     title: "Axios",
     message: "This is axios sample.",
     json_data: null,
   });
   const getData = () => {
     let id = 2;
     axios.get(url + id).then((result) => {
       console.log(result.data);
       data.json_data = result.data;
     });
   };
   onMounted(() => {
     getData();
   });
   return { data, getData };
 },
};
</script>

getDataメソッドで、JSONPlaceholderにアクセスしています。この時に、変数idの値を、URLの最後に追記してアクセスしています。

thenメソッドで、データが取得できた時の処理を書いています。内容は、data.json_dataに帰ってきた値を代入しています。

data.json_dataの値が変更され、テンプレートタグ内のtableの値が書き換わります。

・clickで入力した番号のデータを取得

今度は、入力項目を追加して、その入力された値のデータを取得するように書き換えます。

HelloWorld.vue

<template>
 <section class="alert alert-primary">
   <h1>{{ data.title }}</h1>
   <p>{{ data.message }}</p>
   <div class="form-group">
     <input type="number" class="form-control" v-model="data.id" />
     <button class="btn btn-primary m-2" @click="doClick">Click</button>
   </div>
   <table class="table table-light table-striped">
     <tbody class="text-left">
       <tr>
         <th style="width: 200px">User ID</th>
         <td>{{ data.json_data ? data.json_data.userId : "-" }}</td>
       </tr>
       <tr>
         <th>ID</th>
         <td>{{ data.json_data ? data.json_data.id : "-" }}</td>
       </tr>
       <tr>
         <th>Title</th>
         <td>{{ data.json_data ? data.json_data.title : "-" }}</td>
       </tr>
       <tr>
         <th>Body</th>
         <td>{{ data.json_data ? data.json_data.body : "-" }}</td>
       </tr>
     </tbody>
   </table>
 </section>
</template>

<script>
import axios from "axios";
import { reactive, onMounted } from "vue";
let url = "https://jsonplaceholder.typicode.com/posts/";
export default {
 setup(props) {
   const data = reactive({
     title: "Axios",
     message: "This is axios sample.",
     id: 0,
     json_data: null,
   });

   const doClick = () => {
     axios.get(url + data.id).then((result) => {
       data.json_data = result.data;
     });
   };

   return { data, doClick };
 },
};
</script>

inputの値と、data.idの値をv-modelで結びつけます。

ボタンをクリックしたら、先ほどと同じようにJSONPlaceholderにアクセスします。この時に、data.idの値をURLの最後に追記します。

後の流れは、先ほどと同じです。これで、入力したidの値を取得できます。

・エラー処理

例えば、100番以上のidを入力されるなど、データが取得できないような状況に陥った時の、エラー処理の内容を書いていきます。

axios.get().then((result)=>{処理}).catch((e)=>{エラーの時の処理})

catchの時の処理が、エラーが起こった時の処理です。

HelloWorld.vueを書き換えます。

const doClick = () => {
 axios
   .get(url + data.id)
   .then((result) => {
     data.json_data = result.data;
   })
   .catch((e) => {
     data.message = "Error " + data.id + "のデータはありません";
     data.id = 0;
     data.json_data = null;
   });
};

データがないときは、プロパティの値を初期化して、データがありませんというメッセージを出すようにしました。

■まとめ

JSONのデータがサクッと使えるのは便利で良いと感じました。

クロスドメインの問題があるから、PHPなどを併用する感じになるのかな？

うまく使うと、API使ったり、DBと連携できたりしそうですね。