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 の最大値の詳細な説明

推薦する

Linux デバイスに空き容量がありません inode の満杯により 500 エラーが発生します

iノードとは何ですか? inode を理解するには、まずファイル ストレージから始める必要があります...

データ URI スキームを使用して Web ページに画像を埋め込む方法の紹介

データ URI スキームを使用すると、HTML、CSS、Javascript などで使用できるインラ...

組み込み Linux 開発環境で ping と nfs を構築するためのソリューション

1. 組み込みソフトウェアレベル 1) ブートローダ -> ブートローダ組み込みシステム全体の...

JSに関する7つの面接の質問、あなたはいくつ正しく答えられますか

序文JavaScript では、これは関数呼び出しコンテキストです。この動作が非常に複雑であるからこ...

MySQLデータベースインデックスの詳細な説明

目次1. MySQLインデックスの紹介2. MySQLの5種類のインデックスの詳しい説明1. 総合索...

Vue で className として空の文字列を使用することはなぜ推奨されないのですか?

目次空の文字列 '' と null を比較するケース1: 空の文字列を使用する &#...

CSS ボックスの折りたたみに対する 5 つの解決策

まず、ボックスコラプスとは何でしょうか?親ボックスの内側にあるべき要素が外側にあります。第二に、箱は...

Ajax リクエストにおけるクロスドメイン問題の原因と解決策

目次1. クロスドメインはどのように形成されるのでしょうか? 2. クロスドメインの根本的な原因3....

カルーセルの制作方法を実現するjs

この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...

Ubuntu サーバーで MySQL を設定し、リモート接続を実装する方法

サーバー: Ubuntu Server 16.04 LSSクライアント: Ubuntu 16.04 ...

Vue マルチページ構成の詳細

目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....

MySQL における SQL ページングクエリのいくつかの実装方法と利点と欠点

【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...

nginxとIISで使用できるSSL証明書を作成する

目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...

ウェブページからテキスト透かしを削除する2つの簡単な方法

<br /> 特定の Web サイトを閲覧して、優れた Web ページを見つけた場合、そ...

MySQL パフォーマンス チューニングについて知っておくべき 15 個の重要な変数 (要約)

序文: MYSQL は最も人気のある WEB バックエンド データベースです。最近、NOSQL がま...