素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

投稿日: 2019年7月19日
最終更新日:

【SSR】Nuxt.jsで@nuxtjs/axiosを使って外部APIにリクエストを投げてレスポンスを取得・表示してみよう【Vue.js】

【最新機種】GoPro hero11 Black

created by Rinker
¥61,300 (2025/01/05 20:59:47時点 楽天市場調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

created by Rinker
THE NORTH FACE(ザノースフェイス)
¥33,000 (2025/01/05 13:22:08時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です!

レッドブル エナジードリンク 250ml×24本

created by Rinker
Red Bull(レッドブル)
¥4,000 (2025/01/05 12:33:39時点 Amazon調べ-詳細)

翼を授けよう!

モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker
モンスター
¥4,718 (2025/01/05 12:33:40時点 Amazon調べ-詳細)

脳を活性化させるにはこれ!

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

created by Rinker
スクウェア・エニックス(SQUARE ENIX)
¥3,940 (2025/01/05 12:41:47時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥15,855 (2025/01/05 12:09:12時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥10,429 (2025/01/05 12:09:13時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

スポンサーリンク

336×280




Nuxt.jsならAPI呼び出しも簡単

前回の記事では、Nuxt.jsプロジェクトにTypeScriptを導入するところまで進めました。

今回は、Nuxt.js内部で外部APIへのリクエストを行って、そのレスポンスを画面に表示するところまでを作ってみようと思います。

手順

モジュールをインストール

まずは例の如くyarnコマンドでモジュールをインストールしましょう。

今回はNuxt.jsから公開されている@nuxtjs/axiosをインストールします。

axiosとは?

axios とは、様々なブラウザやNode.js環境で使う事の出来るプロミスベースのHttpクライアントです。

今時のフロントエンドでは、axiosを使ってHttpリクエストを行うのがデファクトとなっています。

Promise based HTTP client for the browser and node.jsaxios/axios: Promise based HTTP client for the browser and node.js

また、Nuxt.jsは今回インストールした@nuxtjs/axiosモジュールによって、よりNuxt.js内で使いやすくなっているので、基本的にはこちらを使う事になります。

nuxt.config.jsの編集

次に、インストールしたモジュールを利用する設定を追記します。

asyncDataの修正

次に、実際にaxiosを使ってAPIから値を取得する部分を記述してみましょう。

axiosをimportすることなく、インジェクションしたapp経由で簡単に利用することが出来ます。

ちなみに、今回はMockoonを使って以下のレスポンスを返すStubを用意してそちらにアクセスしようと思います。

確認

では、実際にhttp://localhost:3000/accounts/12345 へアクセスしてみましょう。

正常に外部APIへリクエストを投げて、レスポンスを表示出来ましたね♪

終わりに

以上のように、Nuxt.jsであればaxiosを導入するのも一瞬でした。

基本的には、このように外部サーバーへのアクセスを行ってレスポンスを取り扱うことになると思うので、是非参考にしてみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , ,

blogenist

Author: blogenist

関連記事

YouTubeも見てね♪