TECHNOLOGY
- Nuxt.js/Vue.js

2020.02.09

2022.06.20

Nuxt.jsでaxiosの使い方と設定方法を紹介

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

今回はNuxt.jsで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が入っているので、{{ [変数名] }}で設定しています。

postには取得したJsonデータのオブジェクト
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/await

node.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（）で繋ぐことにより、例外が発生した場合に処理を実行することができます。