src\composables\useAxios.js

import axios from "axios";

function useAxios() {
//封裝一些常用配置，可以避免重複輸入
  const instance = axios.create({
    timeout: 1000,
    // baseURL: "<http://localhost:3000>"
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer SOMEJWTTOKEN",
    },
  });
  //也可以對這個實例添加攔截器，攔截請求或攔截響應，添加一些統一的自訂義的業務處裡
  instance.interceptors.request.use(
    (config) => {
      console.log(config);
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  );

  instance.interceptors.response.use(
    (response) => {
      console.log(response);
      return response;
    },
    (error) => {
      console.log("发生了错误", error);
      return Promise.reject(error);
    }
  );

  return instance;
}

export default useAxios;

在需用到的組件中import並創建實例即可

<script setup>
import SearchNote from "./components/SearchNote.vue";
import NoteList from "./components/NoteList.vue";
import AddNote from "./components/AddNote.vue";
import { onMounted, ref, watch } from "vue";
import useAxios from "./composables/useAxios";

const notes = ref([]);
const loading = ref(false);
const searchTerm = ref("");
const error = ref(null);

const axios = useAxios();

onMounted(async () => {
  loading.value = true;

  const controller = new AbortController();

  try {
    setTimeout(() => {
      controller.abort();
    }, 500);

    const res = await axios.get("/api/notes", {
      signal: controller.signal,
    });
    notes.value = res.data;
  } catch (e) {
    if (e?.response?.data) {
      error.value = e.response.data;
    }
  } finally {
    loading.value = false;
  }
});

watch(searchTerm, async (newSearchTerm) => {
  loading.value = true;
  const res = await axios.get("/api/notes", {
    params: {
      term: newSearchTerm,
    },
  });
  notes.value = res.data;
  loading.value = false;
});

async function handleNoteFormSubmit(note) {
  const res = await axios.post("/api/notes", note, {
    // headers: {
    //   "Content-Type": "application/json",
    //   Authorization: "Bearer SOMEJWTTOKEN",
    // },
  });
  notes.value.push(res.data);
}
</script>