[MavsDiary #2]NuxtJS *AxiosでAPI連携を構築

こんにちは、タロウです。

弊社マーベリックスでは、NuxtJSをWebサイトを始め、システム開発でも使用しています。

そんな弊社の強みであるNuxtJSで、外部APIでは使いたいライブラリaxiosの使い方と設定方法を紹介します。

axiosとは

HTTP通信を簡単に行うことができるJavascriptライブラリです。

Nuxt.jsにもaxios-moduleというものがあり、npmコマンドで簡単にインストールすることが
でき非常に便利でオススメなプラグインなのでご紹介いたします。

今回は実際にAPIを叩いて画面へ表示するまでをやってみようと思います。
ぜひ参考にしてください！
(Nuxt.jsの動作環境の作成方法はこちら！)

この記事でやることはこんなかんじです。

axiosのインストール方法
nuxt.comfig.jsの設定
axiosの使ってAPIを叩く
返却されたJSONを画面へ表示

axiosのインストール方法

Nuxt.jsでaxiosを導入するには@nuxtjs/axiosを入れます。 ※テンプレートプロジェクトの作成でAxiosにチェックを入れた方は不要です。

npm install --save @nuxtjs/axios

nuxtがインストールされてるディレクトリで上記コマンドを実行します。

--save

をつけることでpackage.jsonに自動で追加されます。 package.jsonに追加することで、

別環境で動作させたい時
同じプロジェクトをメンバー間で共有したい時

に、

npm install

するだけで同じ環境（プラグインやライブラリが同じ状態）になります。

nuxt.comfig.jsの設定

@nuxtjs/axiosが有効になるように nuxt.config.jsの修正をします。

module.exports = {
    ・
    ・
    ・
   /*
   ** Nuxt.js modules
   */
    modules: 
    [
      "@nuxtjs/axios",
    ],
    ・
    ・
    ・
};

すでに別のプラグインなどで追加済みでしたら、カンマ区切りで追加します。

axiosの使ってAPIを叩く

呼び出し方

page/index.vue ファイルのscriptタグに下記を記載してみましょう！

<script>
    export default {
        async asyncData({ $axios }) {
            // 取得先のURL
            const url = "https://qiita.com/api/v2/items";
            // リクエスト（Get）
            const response = await $axios.$get(url);
            // 配列で返ってくるのでJSONにして返却
            return {
                posts: response
            };
        }
    };
</script>

今回はQiitaのAPIにリクエストするようにしています。そのまま実行すると、JSON形式でずらずらっと、タイトルやURLが返却されます。

返却されたJSONを画面へ表示する

page/index.vue ファイルのtemplateタグに下記を記載してみましょう！

<template>
    <div>
        <ul>
             <li v-for="(post, index) in posts" :key="index">
                 <a :href="'post.url'" target="_blank" rel="noopener noreferrer">{{ post.title }}</a>
            </li>
        </ul>
    </div>
</template>

vue.jsのv-forを利用して、取得したJSONの要素数分ループさせ qiitaの記事タイトルをリンク付きで表示します。

※UIフレームワークは

Vuetify

を使用しています！　表示させたい部分に

div

内のコードを書けば表示できます。取得したデータをずらずらっと表示することができました！返却されたJsonにタイトル・URLが入っているので、{{ [変数名] }}で設定しています。

には取得したJsonデータのオブジェクトpost
にはループのインデックスが入ります。（今回は未使用）index

設定方法

HTTPメソッド

axiosでは下記のHTTPメソッドが設定でき、呼び出し先のAPIがどのメソッドで受け付けているかによって使用するHTTPメソッドが変わります。

GET
POST
PUT
DELETE

GET主にデータを取得するAPIで使用されています。

const response = await $axios.$get
    (url, {
        params: {
            // パラメータを指定
            id: 123
        }
    });

https://hogehoge?id=123

のようなクエリパラメータをつける場合は、第二引数にparamsを指定します。 POST主にデータを登録するAPIで使用されています。

const response = await $axios.$post
    (url, {
        id: 123,
        name: hoge
    });

postを使う際は、アプリケーション側から何かしらのデータを送ることがほとんどなので、上記のように第二引数にJson形式で指定します。 PUT主にデータを更新するAPIで使用されます。

const response = await $axios.$put
    (url, {
        id: 123,
        name: hoge
    });

postと同様に第二引数にJson形式で指定します。 DELETE訳通りに削除するAPIで使用されています。

const response = await $axios.$delete
    (url, {
        data: {
            id: 123,
            name: hoge
        }
    });

deleteの場合は

data

に設定する必要があるので注意が必要です。

header(ヘッダー)

ファイルを送る時などや、ベーシック認証の情報などを設定することができます。

const response = await $axios.$post
    (url, {
        id: 123,
        name: hoge
    },
    { header : 
        { 'Content-Type': 'application/x-www-form-urlencoded' }
    });

第３引数にJson形式で設定することで、任意の設定値をheaderに持たせることができます。

同期・非同期制御

axiosは非同期通信のため、リクエストを投げ終わるとメインの処理（呼び元）に戻ります。リクエストの返却を待つ、同期処理を行う方法を紹介します。 .then().thenを使用することでリクエストが帰って来た後の処理を作成することができます。

const response =　$axios.$post
    (url, {
        id: 123,
        name: hoge
    }).then(function(response) {
// ここにリクエストが帰ってきた後の処理を書く
console.log(response);
});

.thenで繋ぐことで後続の処理を書くことができますが、呼び出し元には戻ってしまうので、注意が必要です。 async/awaitnode.js version7から使用できるようになった書き方です。

async function() {
const response =　await $axios.$post
    (url, {
        id: 123,
        name: hoge
    });
    console.log(response);
};

async をfunctionの前につけます。（おまじない的に） await は同期処理させたい部分につけます。

例外処理

リクエストに失敗した際や予期しないエラーが発生した場合、例外処理を入れておかないとアプリケーション自体がエラーで終了してしまいます。

const response =　$axios.$post
    (url, {
        id: 123,
        name: hoge
    }).catch(function(error) {
        // エラー時の処理を書く
        console.log('ERROR!')
    });

.catch（）で繋ぐことにより、例外が発生した場合に処理を実行することができます。