@nuxt/httpを導入する

ペペロミアのWeb版でのAPIアクセスの実装に@nuxt/httpを導入しみました。

github.com

Nuxtは元々axiosを押していましたが、今後こちらの@nuxt/http標準になる流れみたいなので採用しました。

Pull Request

https://github.com/wheatandcat/PeperomiaWeb/pull/29

実装方法

まず、インストール

$ yarn add @nuxt/http

nuxt.config.jsに以下を追加

■ nuxt.config.js

  plugins: [
    '~/plugins/http',  ← 追加
    '@/plugins/composition-api',
    '~/plugins/cookie-storage.js',
  ],

  modules: [
    '@nuxt/http',  ← 追加
    '@nuxtjs/firebase'
  ],

Typeの設定のtsconfig.jsonに追加

■ tsconfig.json

    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/firebase",
      "@nuxt/http",  ← 追加
      "vuetify"
    ]
  },

plugins/http.tsを作成して追加 ここで各Requestのハンドリングを行えます。

■ plugins/http.ts

import { Plugin } from '@nuxt/types'
import { NuxtHTTPInstance } from '@nuxt/http'

type Props = {
  $http: NuxtHTTPInstance
}

const httpPlugin: Plugin = ({ $http }: Props) => {
  $http.onRequest((config) => {
    console.log('Making request to ' + config.url)
  })

  $http.onError((error) => {
    alert('リクエストに失敗しました。メッセージ: ' + error.message)
  })
}

export default httpPlugin

最後にpost用のメソッド作成

■ modules/fetch.ts

import { SetupContext } from '@vue/composition-api'
import { getAccessToken } from './auth'

const BASE_URL = process.env.API_HOST

export const post = async (context: SetupContext, path: string, param: any) => {
  const token = await getAccessToken(context)

  context.root.$http.setHeader('Content-Type', 'application/json')
  context.root.$http.setHeader('Authorization', `Bearer ${token}`)

  const res = await context.root.$http.post(`${BASE_URL}/${path}`, param)

  return res
}

後は実際に上記のpostメソッドを使用してhttp Requestを実装

■ components/organisms/schedule/dialog.vue

    const onSave = async (itemDetail: ItemDetail) => {
      state.apiLoading = true

      const res = await post(context, 'UpdateItemDetail', {
        itemDetail,
      })

      if (res.ok) {
        await setItemData()
        state.mode = 'show'
      }

      state.apiLoading = false
    }

こんな感じの動きになりました。

@nuxt/httpは初めて使ってみたけどシンプルで結構良さ気な気がする