【Nuxt】型を拡張してプラグインを入れる -> AxiosでAPIを叩いてみる

前提

Nuxt × Typescriptの動作環境が整っている
※ 前回の動作環境を引き継いで進めていきます。

型定義とは

Vue公式の説明から抜粋

プラグインは Vue のグローバル/インスタンスプロパティやコンポーネントオプションを追加することがあります。このような場合、TypeScript でそのプラグインを使用したコードをコンパイルするためには型定義が必要になります。幸い、TypeScript にはモジュール拡張 (Module Augmentation) と呼ばれる、すでに存在する型を拡張する機能があります。

参考にしつつ、axiosを入れていきます。

axios

HTTP クライアントライブラリです。
非同期API呼び出せる他、レスポンスがPromiseベースなので、後続処理に .then と .catch を続けることができます。
@nuxtjs/axios の詳細は公式が一番わかりやすいです。

$ yarn add @nuxtjs/axios

型定義ファイル

まず型定義ファイルを作成します。
※ ルートディレクトリ配下で実行

$ mkdir types
$ touch types/nuxt.d.ts

この d.ts という拡張子はTypescriptの型定義ファイルを意味します。
Nuxtが用意している型定義ファイルを拡張していきましょう。

import { Context } from '@nuxt/types'
import { NuxtAxiosInstance } from '@nuxtjs/axios'

export interface NuxtContext extends Context {
  $axios: NuxtAxiosInstance
}

APIを叩いてみる

とりあえずAxiosが使えればいいので、適当なAPIを探したところ
（いい意味で）めちゃくちゃくだらないAPIが見つかりました。
ぜひ試してみたいと思い、採用します。

icanhazdadjoke

提供元 -> 親父ギャグをかましてくれるAPIです。

まず、curl でどんなものか叩いてみましょう。
※ 結果は毎回違うようです

$ curl -H "Accept: application/json" https://icanhazdadjoke.com/
{
    "id":"gNZTCQnWSf",
    "joke":"The other day I was listening to a song about superglue, it\u2019s been stuck in my head ever since.",
    "status":200
}

実装

mounted でログ出力してみましょう。

  async mounted(): Promise<void> {
    console.log(await this.$axios.get('https://icanhazdadjoke.com/', {
      headers: {
        'Accept': 'application/json'
      }
    }))
  }

developerツールでこんなログが出ていたら成功です。

自分なりの実装を

前回は簡単なカウントアップ機能を作りました。
Vuetifyを使って、すこしでも親父ギャグをかっこよくしてあげてください。

共有

【今回の作業ブランチ】
https://github.com/yutahhh/firebase-study/tree/feature/%233

【Hosting】
https://fir-study-42747.web.app/

お疲れ様でした。
しょーもない内容でしたが、初学者のためになれば幸いです。