Axios の二次カプセル化の例 プロジェクトのデモ

「../util/axiosConfig」からサーバーをインポートします。
// axiosの基本構成とリクエスト構成を変更する関数request({
  URL、
  メソッド = "get"、
  クエリパラメータ = {},
  本文 = {},
  パスパラメータ = null、
  設定 = {},
}) {
  定数configAxios = {
    方法、
    ...設定、
    url: dealRequestUrl(url, パスパラメータ),
  };
  スイッチ（メソッド）{
    ケース「取得」:
      configAxios.params = クエリパラメータ;
      壊す;

    デフォルト：
      // リクエストメソッド 'PUT'、'POST'、および 'PATCH'
      configAxios.data = 本文;
      壊す;
  }
  コンソールログ('configAxios', configAxios)
  server(configAxios) を返します。
}

関数 dealRequestUrl(url, pathParm) {
  if (!pathParm) は url を返します。
  dealurl = url とします。
  Object.keys(pathParm).forEach((ele) => {
    dealurl = dealurl.replace(`{${ele}}`, pathParm[ele]);
  });
  dealurl を返します。
}
クラスGenerateServer {
  コンストラクタ(url) {
    this.url = url;
  }
  getdata(パラメータ) {
    コンソールログ('parm', parm)
    リクエストを返します({ ...parm、メソッド: "get"、URL: this.url });
  }
  postdata(parm) {
    リクエストを返します({ ...parm、メソッド: "post"、URL: this.url });
  }
  削除されたデータ(parm) {
    リクエストを返します({ ...parm、メソッド: "delete"、URL: this.url });
  }
}
デフォルトの GenerateServer をエクスポートします。

    「./request」から { userInfoServer } をインポートします。
    。
    。
    。

    // リクエストを送信 userInfoServer.getUserName
      .getdata({
        クエリパラメータ: {
          id: 223,
        },
      })
      .then((res) => {
        コンソールにログ出力します。
      });
    // リクエストを送信 userInfoServer.getUserName
      .postdata({
        体： {
          id: 223,
        },
      })
      .then((res) => {
        コンソールにログ出力します。
      });
    // パラメータ userInfoServer.getUserList を含むリクエスト パスで GET リクエストを送信します。
      .getdata({
        クエリパラメータ: {
          id: 223,
        },
        パスパラメータ: {
          id: 567,
        },
      })
      .then((res) => {
        コンソールにログ出力します。
      });