Nuxt.js と axios でWebAPIを利用する

Nuxt.js の環境で外部のWebAPIを利用する方法について紹介します。
Webサービスを作っていると、外部のAPIと連携してサービスを作ることが多いと思います。
Nuxt.jsでは をnuxt-community から axios-module を導入することでかんたんに axiosというHTTPクライアントを導入することができます。

目次

• Nuxt.js と axios でWebAPIを利用する
  • 目次
  • Nuxt Axios モジュール
    • axiosとは
    • axios-module
  • インストール
  • 設定
  • axios モジュールの使い方
    • 呼び出し方
  • CoinDesk が提供するWebAPIを利用して、BitCoin価格を表示する例
  • まとめ

Nuxt Axios モジュール

axiosとは

axios自体は PromiseベースのHTTPクライアントです。
axios/axios: Promise based HTTP client for the browser and node.js

Promise based HTTP client for the browser and node.js

axios-module

Nuxt.js で簡単にaxiosを導入できるaxios-moduleというものがあります。
nuxt-community/axios-module: Secure and easy axios integration with Nuxt.js

axios 単体で導入することももちろんできますが、 axios-module を使うことで、 Nuxt.js のInjectの機能でコンポーネントやVuex等アプリケーション全体で利用できるようにしてくれます。
他にも proxy module との統合やaxios-retryの機能を組み込んでいたり、nuxt.jsで利用する場合に使いやすくなっているようです。

インストール

Nuxt.js で Google Adsense を導入するには@nuxtjs/axiosを入れます。

yarnの場合

yarn add @nuxtjs/axios

npmの場合

npm install @nuxtjs/axios

設定

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

nuxt.config.js

  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
    // proxyHeaders: false
  }

axios モジュールの使い方

呼び出し方

asyncData内でaxiosを使う

async asyncData({ $axios }) {
  const res = await $axios.$get('http://example.com')
  console.log(res);
}

method, created, mounted 内で axiosを呼び出す場合

methods: {
  async fetch() {
    const res = await this.$axios.$get('http://example.com')
    console.log(res);
  }
}

Vuex Store の action で呼び出す場合

{
  actions: {
    async fetchData ({ commit }) {
      const res = await this.$axios.$get('http://example.com')
      commit('SET_DATA', res)
    }
  }
}

CoinDesk が提供するWebAPIを利用して、BitCoin価格を表示する例

coindeskのAPIを利用して、 BitcoinのUSDでのレートを表示してみます。
asyncDataで内でaxiosを利用してデータを取得することにします。

コード pages/axiosSamplePage.vue

<template>
  <div>
    <p>time:{{ data.time.updated }}</p>
    <p>chartName:{{ data.chartName }}</p>
    <p>USD:{{ data.bpi.USD.rate }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const response = await $axios.$get('https://api.coindesk.com/v1/bpi/currentprice.json')
    return {
      data: response
    }
  }
}
</script>

表示結果

まとめ

今回の内容をざっくりまとめます。

• Nuxt.jsでは @nuxtjs/axios を利用すると便利
• axios-moduleを使うことでアプリケーション全体でaxiosを利用できる

Nuxt.js で 外部APIを使うときにはaxios moduleを利用すると便利なので参考になればと思います。