axiosdata：使用Axios輕鬆獲取和管理數據

當我們需要從一個遠程服務器獲取數據時，想要簡潔且易於維護的方法是極其必要的。尤其是在JavaScript中，Axios已經成為了熱門的解決方案。然而，管理命令或查詢都可能會變得比較複雜。因此，axiosdata是一種用於簡化Axios的方法，它可以輕鬆地運用針對不同使用情景定製的數據訪問方法

一、快速開始

獲取適用於axiosdata的軟件包（npm）:

$ npm install axiosdata

如果您未在項目中使用Axios，請同時安裝Axios和Vue。 （當然，如果您使用的是其他框架，可以按照官方文檔的任何說明進行設置。）

$ npm install axios vue

當軟件包安裝完成後，要開始使用，您可以簡單地在需要的文件中進行加入：

import AxiosData from "axiosdata";

現在，您可以使用以下方法來獲取和更改數據：

const axiosData = new AxiosData({
  url: "https://www.example.com/api",
});

axiosData.getData().then((data) => {
  console.log(data);
});

axiosData.putData({name: "New Name"}).then(() => {
  console.log("Data changed!");
});

當然，您可以為方法提供一些用於設置Axios實例的選項。例如，以下代碼段將Axios的timeout設置為10秒：

const axiosDataWithTimeout = new AxiosData({
  url: "https://www.example.com/api",
  axiosConfig: {
    timeout: 10000,
  },
});

二、像常規Axios一樣使用Interceptors

Axios Interceptors 是React生態系統中經常使用的一種方法。 畢竟，攔截器可以幫助我們在發送/接收請求時檢查和修改數據。 axiosdata 允許您使用Interceptors

在axiosdata實例化時加入攔截器 ，您可以像使用普通`Axios`一樣使用攔截器。這是一個具體的例子：

import AxiosData from "axiosdata"
import axios from "axios"

const axiosData = new AxiosData({
  url: "https://www.example.com/api",
  axiosConfig: {
    timeout: 5000,
  },
});

axios.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${localStorage.token}`;

  return config;
});

axios.interceptors.response.use(
  (response) => {
    axiosData.loading = false;

    return response;
  },
  (error) => {
    axiosData.loading = false;

    return Promise.reject(error);
  }
);

export default axiosData;

三、自定義Axios方法

axiosdata允許您根據相應需要增加自定義Axios方法。 您可以在實例實例化時即時添加方法（讓您在運行時添加方法），或在創建新類時定義本定義方法。

以下是針對實例化後即時添加自定義方法的代碼示例：

import AxiosData from "axiosdata";

const axiosData = new AxiosData({
  url: "https://www.example.com/api",
});

axiosData.addApiMethod(
  (id) => `/users/${id}/photos`,
  {
    method: "GET",
  }
);

以下是一個創建自定義本定義方法的代碼示例：

import AxiosData from "axiosdata";

class CustomAxiosData extends AxiosData {
  constructor() {
    super({
      url: "https://www.example.com/api",
    });
  }

  getCustomData(id) {
    return this.axiosInstance.get(`/users/${id}/customData`);
  }
}

const customAxiosData = new CustomAxiosData();

customAxiosData.getCustomData(123);

四、簡單與方便的特徵

axiosdata提供了一些有用的功能，以儘可能方便的方式與在應用程序中經常遇到的任務進行交互。以下是其中一些例子：

1. 自動過濾更新數據:

const axiosData = new AxiosData({
  url: "https://www.example.com/api",
});

axiosData.getData().then((data) => {
  console.log(data);
  console.log(axiosData.data.value); // 這裡會輸出與"data"一樣的內容 
});

axiosData.updateData({ value: "new value" }).then(() => {
  axiosData.getData().then((data) => {
    console.log(data);
    console.log(axiosData.data.value);  // 這裡會輸出 "new value"
  });
});

2. 面向列表的數據選項

設計任何針對列表數據的應用就像其他框架中所做的那樣簡單明了

const axiosData = new AxiosData({
  url: "https://www.example.com/api",
  list: true,
});

axiosData.getData().then((data) => {
  console.log(data);
  axiosData.data.forEach(({ value }) => {
    console.log(value);
  });
});

3. 考慮到必要的事件

我們對於數據更新是有興趣的，因此我們的AxiosData實例提供了可供訂閱的事件

const axiosData = new AxiosData({
  url: "https://www.example.com/api",
});

axiosData.on("beforeGet", () => {
  console.log("Getting data...");
});

axiosData.on("afterGet", () => {
  console.log("Data obtained.");
});

axiosData.getData().then((data) => {
  console.log(data);
});

五、總結

總之，axiosdata是一個非常有用的工具，因為它簡化了Axios的使用並提供了很多額外的功能。 不僅如此，它還嘗試使其儘可能簡單，並針對應用特定的使用情況。 因此，在隨着您的項目的迭代的過程中， 它被認為是不可少的。