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

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

1. なぜパッケージングを行うのですか?

全体的なコード呼び出し、リクエストの公開処理、パーソナライズされたカスタマイズを容易にします。

2. 他の人がすでに多くのものをカプセル化しているのに、それを変更して使用しないのはなぜでしょうか?

  • パッケージのアイデアはあなた自身のプロジェクトには適していません
  • カプセル化後に呼び出すのは不便

3. パーソナルパッケージのデモ

コード構造 [vue ベース]

基本的な考え方

リクエスト/モジュール/ユーザーユーザー情報関連モジュール[サービス]などのファイルに従って、モジュールごとにすべてのリクエストインターフェースアドレスを保存します。

2. カプセル化メソッドとクラス。共通のリクエストメソッドをすべてのリクエストにバインドし、リクエストURLのパスパラメータを処理する

生成サーバ.js

「../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 をエクスポートします。

3. 全体を公開する

使用

    「./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) => {
        コンソールにログ出力します。
      });

要約:

上記のカプセル化は主に、メンテナンスを容易にするためにリクエストをより詳細に分割することを目的としています。開発時にも便利です。新しいインターフェース要件については、対応するモジュールに URl 構成と応答ジェネレーター構成を追加するだけで済みます。その後、ビジネス コードでリクエストを処理できます。パス パラメータとリクエスト ボディ パラメータはカプセル化されているため、使用時に対応する構成について心配する必要はありません。

上記のコードは、ファイルのアップロード、リクエストパラメータ文字列の取得などは処理しません。ただし、対応する axios に設定を追加するだけです。メンテナンスが簡単です。

これで、本プロジェクトにおける Axios 二次パッケージングに関する記事は終了です。Axios 二次パッケージングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

コードgit: git

以下もご興味があるかもしれません:
  • Vue での Axios の二次カプセル化の例
  • Vue の二次カプセル化 axios をプラグインとして使用する詳細な説明
  • vue axios 二次パッケージングのサンプルコード
  • Vue Axios の二次カプセル化の詳細な説明
  • 一般的なビジネスシナリオに基づいた vue axios の二次カプセル化の実装

<<:  LinuxにPHP7をインストールする方法の詳細な説明

>>:  MySQL における int の最大値の詳細な説明

推薦する

MySQLの実行プロセスとシーケンスについての簡単な説明

目次1:mysql実行プロセス1.1: コネクタ1.2: キャッシュ1.3: アナライザー1.4: ...

ウェブサイトアイコンを追加するにはどうすればいいですか?

最初のステップは、アイコン作成ソフトウェアを準備することです。まず、いわゆるアイコンは拡張子 .ic...

MySQL5.7+ MySQL Workbenchのインストールと設定方法のグラフィックチュートリアル(MAC)

この記事では、主にMACオペレーティングシステムでのMySQL5.7とMySQLWorkbenchの...

MySQLデータベースの追加、削除、変更操作の詳細な説明

データの挿入テーブル名(列名1、列名2、列名3)の値(値1、値2、値3)に挿入します。ユーザーに(u...

Linux オペレーティング システムの概要と紹介

目次1. オペレーティングシステムとは何か2. Linuxの起源3. Linuxの基本機能4. Li...

ウェブページのエンコードにおける GB2312、GBK、UTF-8 の違い

まず、GB2312、GBK、UTF-8 はすべて文字エンコーディングであることを理解する必要がありま...

MySQLでNULL値を判定する際の落とし穴事例

目次序文Mysql の case when 構文:事例実践:要約:序文今日、プログラムを開発している...

Vueの使用に関する深い理解

目次Vueのコアコンセプトを理解するVueの双方向バインディングの原理と実装を探るVue 双方向バイ...

mybatis-plusページングパラメータが渡された後、SQLのwhere条件にはページング情報操作の制限がありません

2時間近くかけて、さまざまな方法を試しました。後で、whereでフィルタリングした後のデータ量が1ペ...

Vue を使用して Web ページのスクリーンショットを撮る方法をご存知ですか?

目次1. html2Canvasをインストールする2. 必要なVueコンポーネントを導入する3. ス...

XHTML 入門チュートリアル: XHTML とは何ですか?

HTMLとは何ですか?簡単に言えば、HTML は Web ページを作成するために使用されます。とて...

CSS3 アニメーション – ステップ機能の説明

最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...

Docker 大規模プロジェクトのコンテナ化変革

仮想化とコンテナ化は、クラウドベースのプロジェクトでは避けられない 2 つの問題です。仮想化は純粋な...

Ubuntu でディスク容量不足により MySQL が起動しない場合の解決策

序文最近、データベースのテーブルに 2 つのフィールドを追加しました。その後、ディスク容量不足のよう...

FTP、FTPS、SFTPの違いについて簡単に説明します

目次FTP、FTPS、SFTP の概要FTP FTPS FTPサーバーFTPソフトウェアのアクティブ...