くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Nuxt3でaxiosはなくなり、Fetch APIをつかうらしい

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が必要だったけど、
不要になってだいぶ便利になった(*´ω`*)

以上!!

参考にしたサイトさま