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' }
});
第3引数に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()で繋ぐことにより、例外が発生した場合に処理を実行することができます。
まとめ
axiosの使い方、設定方法の紹介でした!
上記内容を知っておくことで大体の要件は満たせると思うので、
ぜひ覚えて置きたい内容です。
また、練習がすぐにできるように書いたので、
まずはコピペしてで動かして見ましょう!!