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

参考サイト
https://www.memory-lovers.blog/entry/2022/06/02/170000
とのこと。以下、メモ。

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呼び出しもこれを使う形に。

Nuxt 3 - Data Fetching
Nuxt 3 - useFetch
<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/, ""),
        },
      },
    },
  },
});

How to proxy api requests? · Discussion #1223 · nuxt/framework
https://github.com/nuxt/framework/discussions/1223

Configuring Vite | Vite
https://vitejs.dev/config/#server-proxy

開発中だとCORS問題があったりして、axios-proxyが必要だったけど、
不要になってだいぶ便利になった