Nuxt3でAPIを呼び出したいなと思ったら、axiosを使わなくなったらしい。
今後はFetch APIか、unjs/ohmyfetchの$fetch
を使う形になる。
axiosの場合、開発中などでCORS問題があったりして、
axios-proxyが必要だったけど、それが不要になってだいぶ便利になった(*´ω`*)
Fetch API
ざっくりな使い方はこんな感じ。
const url = "https://..."; const headers = new Headers({ Authorization: `...`, }); const res = await fetch(url, { method: "GET", headers: headers, }); const resData = await res.json(); console.log(`** ${res.status}`, resData);
unjs/ohmyfetch
unjs/ohmyfetchの場合は、こんな感じ。
const headers = { Authorization: `...`, ); const res = await $fetch<ResponseType[]>(url, { method: "GET", headers: conf.headers, retry: 3 }); console.log(res);
GET
など一部のみretryが使えるのも便利。
useFetch
コンポーネント内だとuseFetch
が追加され、
API呼び出しもこれを使う形に。
<script setup> const { data: count } = await useFetch('/api/count') </script> <template> Page visits: {{ count }} </template>
axiosを使うときの注意
以降中のときなどでaxiosを使いたい場合、
proxyを設定する必要がある。
Nuxt3からはnuxt.config.ts
のサーバ(vite)側に設定すればよいっぽい。
import { defineNuxtConfig } from "nuxt"; // https://v3.nuxtjs.org/api/configuration/nuxt.config export default defineNuxtConfig({ vite: { server: { proxy: { "/api/": { target: "https://api.example.com", changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, }, });
開発中だとCORS問題があったりして、axios-proxyが必要だったけど、
不要になってだいぶ便利になった(*´ω`*)
以上!!