javascript Nuxt.js Vue.js プログラミング 開発ノウハウ

Nuxt.jsのserverMiddlewareを使って、apiを叩く

更新日:


 

こんにちは、mabuiです。
今回はNuxt.jsのserverMiddlewareを使って、apiを叩く方法を書いていきます。

クライアントから直接外部ドメインのapiを叩くと、クロスドメイン問題でブラウザのセキュリティエラーが発生しますが、この方法だと好きなタイミングでサーバーサイドから外部apiを叩くことが可能です。

別の方法として、asyncDataを使用してサーバーサイドから外部apiを叩くことも可能ですが、この方法だと叩くタイミングがコンポーネントの呼び出し時に限定されてしまいます。

流れとしては下記です。
1, Vuexのactionsから、axiosでserverMiddlewareを叩く
2, serverMiddlewareから、axiosでapiを叩く
 

コード紹介

今回はVuexのactionsに実行メソッドを用意しました。
Vuexのdispatchメソッドを使用して、コンポーネントの任意のタイミングで実行しましょう。

store/index.js

今回は外部apiとして、coingeckoの仮想通貨銘柄の一覧を取得するapiを使用しています。
次はserverMiddlewareの実装です。

serverMiddleware/api.js

最後に、serverMiddlewareのパスを設定します。

nuxt.config.js

以上で、actionsのapiメソッドを実行して、コンポーネントの好きなタイミングで外部apiを実行できるようになりました。
 

-javascript, Nuxt.js, Vue.js, プログラミング, 開発ノウハウ
-, , ,

Copyright© , 2019 All Rights Reserved Powered by STINGER.