@arshown/vue3-axios v1.3.0

vue3-axios

一個基於 axios 所延伸並適用於 vue3

Install

> npm install @arshown/vue3-axios
# or
> yarn add @arshown/vue3-axios

Started

// main.js
import { createApp } from "vue";
import { createAxios } from "@arshown/vue3-axios";
import App from "./App";

const axios = createAxios();

const app = createApp(App);
app.use(axios);
app.mount("#app");

Usage

<script>
import { useAxios } from "@arshown/vue3-axios";

export default {
  setup() {
    const http = useAxios();

    http.get("http://api.example.com/path").then(response => {
      ...
    });
  }
}
</script>

Interceptors

const axios = createAxios({
  baseURL: "http://api.example.com",
});

const loggerEject = axios.subscribe({
  onRequest(config) {
    console.debug(
      "API REQUEST:",
      config.method.toUpperCase(),
      config.url,
      config.params ?? "",
      config.data ?? ""
    );
    return config;
  },
  onResponse(response) {
    console.debug(
      "%cAPI RESPONSE: " +
        `${response.config.method.toUpperCase()} ` +
        `${response.config.url}`,
      "color:green;",
      response
    );
    return response;
  },
  onRequestError(error) {
    console.error(
      "API REQUEST FAILED:",
      error.response.config.method.toUpperCase(),
      error.response.config.url,
      error.response
    );
    return error;
  },
  onResponseError(error) {
    console.error(
      "API RESPONSE FAILED:",
      error.response.config.method.toUpperCase(),
      error.response.config.url,
      error.response
    );
    return error;
  },
});

// 移除攔截器
loggerEject();