Axios を使用して Vue2 がリクエストを開始する詳細なプロセス記録

Axios を使用して Vue2 がリクエストを開始する詳細なプロセス記録

序文

この記事をご覧になった時点で、クロスドメイン リクエストとは何か、またその処理方法については既にご存知かと思います。この記事では詳細には触れません。

この記事の背景は Springboot2.3 をベースに構築されています。コントローラーにはビジネス ロジックは記述されず、フロントエンドのデバッグにのみ使用されます。

コントローラーで使用されるR.successは、私がカプセル化したツール クラスです。コードは記事の最後にあります。

Axiosのインストールと設定

プロジェクトディレクトリでコマンドを実行してaxiosをインストールします

npm インストール -S axios

srcパスのmain.jsファイルを開き、ファイルにaxios依存関係を導入し、vueグローバルプロパティにマウントします。

// axios 依存関係を参照 import axios from 'axios'

// vue にハングアップします。ここでは axios をリクエストとしてマウントし、this.request を使用してコンポーネント内で axios を呼び出すことができます。 Vue.prototype.request = axios;

GET リクエストは、axios の get メソッドを呼び出すことによって開始されます。それをクリックすると、メソッドが url と config の 2 つのオブジェクトを受け取ることがわかります。

シンプルなGETリクエストを開始する

@レストコントローラ
@RequestMapping("/ユーザー")
パブリッククラスUserController{
    @GetMapping("/リスト")
    パブリックRリスト(){
        return R.success("ユーザーリストのクエリが成功しました!");
    }
}
<テンプレート>
    <div id="インデックス">
        <button @click="selectList">ユーザーを照会</button>
    </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    名前: "インデックス",
    メソッド: {
        選択リスト() {
            // 単純な GET リクエストは、URL を渡すだけで実装できます。this.request.get("http://localhost:8000/user/list").then(res => {
                コンソールにログ出力します。
            }).catch(e => {
                コンソールにログ出力します。
            })
        }
    }
}
</スクリプト>
<スタイル></スタイル> 

シンプルなGETリクエストを開始し、パラメータを渡す

@レストコントローラ
@RequestMapping("/ユーザー")
パブリッククラスUserController{
    @GetMapping("/get")
    パブリックR get(文字列id) {
        return R.success("ユーザー獲得に成功しました!");
    }
}
選択する() {
    設定 = {
        パラメータ: {id: "1"}
    }
    // URL の後に config オブジェクトが続きます。config オブジェクトの params 属性はリクエストパラメータに対応します this.request.get("http://localhost:8000/user/get", config).then(res => {
        コンソールにログ出力します。
    }).catch(e => {
        コンソールにログ出力します。
    })
},

POSTリクエストを行う

POST リクエストは axios の post メソッドによって呼び出されます。これをクリックすると、このメソッドのパラメータ リストに 3 つのオブジェクトがあることがわかります。

シンプルなPOSTリクエストを開始する

@レストコントローラ
@RequestMapping("/ユーザー")
パブリッククラスUserController{
    @PostMapping("/save")
    パブリックR保存() {
        return R.success("ユーザーが正常に追加されました!");
    }
}
保存() {
    // 単純な POST リクエストの送信は、単純な GET リクエストと似ています。get メソッドを post メソッドに変更するだけです。this.request.post("http://localhost:8000/user/save").then(res => {
        コンソールにログ出力します。
    }).catch(e => {
        コンソールにログ出力します。
    })
}, 

POSTリクエストを開始し、パラメータを送信する(I)

@レストコントローラ
@RequestMapping("/ユーザー")
パブリッククラスUserController{
    /**
     * 一般的に、POST リクエストを開始すると、パラメータはリクエスト本体に配置され、@RequestBody を通じて解析されます。* ここではエンティティ クラスを作成せず、Map コレクションを直接使用して受信します。*/
    @PostMapping("/save")
    パブリック R 保存(@RequestBody Map<String, String> データ) {
        return R.success("ユーザーが正常に追加されました!")
                .setAttribute("名前", data.get("ユーザー名"))
                .setAttribute("pwd", data.get("パスワード"));
    }
}
保存() {
    データ = {
        ユーザー名:「ジャワ小学生丶」、
        パスワード: "123456789"
    }
    // パラメータリストを見ると、推測できるはずです。2 番目のパラメータにオブジェクトを入れるだけです。 // このメソッドによって運ばれるパラメータはリクエスト本体に配置されることに注意してください this.request.post("http://localhost:8000/user/save", data).then(res => {
        コンソールにログ出力します。
    }).catch(e => {
        コンソールにログ出力します。
    })
},

POST リクエストを開始してパラメータを送信する (パート 2)

前述の通り、データを使って直接渡されるパラメータはリクエストボディに配置され、バックエンドは@RequestBodyを使ってそれを取得する必要があります。ここでは、パラメータをパスパラメータに変更して送信します。

@レストコントローラ
@RequestMapping("/ユーザー")
パブリッククラスUserController{
    @PostMapping("/save")
    パブリック R save(文字列ユーザー名、文字列パスワード) {
        return R.success("ユーザーが正常に追加されました!")
                .setAttribute("名前", ユーザー名)
                .setAttribute("pwd", パスワード);
    }
}
保存() {
    設定 = {
        パラメータ: {
            ユーザー名:「ジャワ小学生丶」、
            パスワード: "123456789"
        }
    }
    // ここではデータは使用されず、代わりにパラメータの受け渡しに config が使用されるか、またはオブジェクトがパラメータとしてカプセル化されて this.request.post("http://localhost:8000/user/save", null, config).then(res => {
        コンソールにログ出力します。
    }).catch(e => {
        コンソールにログ出力します。
    })
},

ファイルのアップロードテスト

GET や POST リクエスト以外にも、PUT、DELETE などのリクエストの種類があります。ここでは一つずつテストすることはしません。ファイルのアップロードについて学習しましょう。

@レストコントローラ
@RequestMapping("/ユーザー")
パブリッククラスUserController{
    @PostMapping("/アップロード")
    パブリック R アップロード(MultipartFile ファイル、文字列ファイル名) {
        // ファイル オブジェクトは受信したファイルであり、ファイルの処理ロジックは省略されます...
        return R.success("ファイルのアップロードが成功しました!")
                .setAttribute("ファイル名", ファイル名);
    }
<テンプレート>
    <div id="インデックス">
        <!-- input:file はファイルを選択するために使用されます。ファイルを選択すると、変更イベントがトリガーされ、fileChange メソッドが呼び出されます -->
        <input type="file" id="file" @change="fileChange" />
        <!-- ファイルのアップロード方法を実行します-->
        <button @click="upload">クリックしてアップロード</button>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    名前: "インデックス",
    データ() {
        戻る {
            ファイル: null
        }
    },
    メソッド: {
        ファイル変更(イベント) {
            // このメソッドはファイルが選択されたときにトリガーされ、ファイル オブジェクトがファイルに保存されます。this.file = event.target.files[0];
        },
        アップロード() {
            // FormData オブジェクトを作成し、その中にファイルを配置します。また、他のパラメータも配置できます。let data = new FormData();
            data.append('ファイル', this.file);
            data.append('fileName', "11223344.txt");
            // 設定オブジェクトを作成し、リクエストヘッダータイプを multipart/form-data に設定します
            設定 = {
                ヘッダー: {'Content-Type': 'multipart/form-data'}
            }
            // 作成したオブジェクトでリクエストを開始します this.request.post('http://localhost:8000/user/upload', data, config).then(res => {
                コンソールにログ出力します。
            })
        }
    }
}
</スクリプト> 

Axios 構成の設定

観察すると、Axios リクエストは config オブジェクトを受信し、構成の詳細情報はnode_modules/axios/index.d.tsファイルで確認できることがわかります。

設定項目はたくさんあります。私も初心者なので、あまり触ったことがありません。ここではいくつかテストして、いつでも確認します。Axiosの中国語サイトをお勧めします。

ベースURL

baseURL は、各リクエストのルート アドレスを設定できるよく使用される属性です。リクエストを行うときは、リクエスト パスのみに注意する必要があります。

<スクリプト>
エクスポートデフォルト{
    名前: "インデックス",
    データ() {
        戻る {
            設定: {
                ベースURL: "http://localhost:8000"
            }
        }
    },
    メソッド: {
        テスト() {
            let data = {name: "Java小学生"};
            this.request.post("/user/save", データ, this.config).then(res => {
                コンソールにログ出力します。
            });
        },
    }
}
</スクリプト>

タイムアウト

タイムアウトもよく使用される設定項目です。これは、リクエストのタイムアウトをミリ秒単位で設定するために使用されます。0 に設定すると、タイムアウトは設定されません。

<スクリプト>
エクスポートデフォルト{
    名前: "インデックス",
    データ() {
        戻る {
            設定: {
                ベースURL: "http://localhost:8000",
                タイムアウト: 5000
            }
        }
    },
    メソッド: {
        テスト() {
            データ = {name: "張漢哲"};
            this.request.post("/user/save", データ, this.config).then(res => {
                コンソールにログ出力します。
            });
        },
    }
}
</スクリプト> 

資格情報付き

この属性もよく使用されます。withCredentials の値は bool 型で、Cookie を許可するかどうかを設定するために使用されます。Axios リクエストは、デフォルトでは Cookie を許可しません。テストのために、Controller を通じて sessionID を印刷できます。

<スクリプト>
エクスポートデフォルト{
    名前: "インデックス",
    データ() {
        戻る {
            設定: {
                ベースURL: "http://localhost:8000",
                // サーバーがCredentials: trueと連携する必要がある、
                タイムアウト: 5000
            }
        }
    },
    メソッド: {
        テスト() {
            let data = {name: "Java小学生"};
            this.request.post("/user/save", データ, this.config).then(res => {
                コンソールにログ出力します。
            });
        },
    }
}
</スクリプト> 

Axiosは今のところここに書かれています。これらの日々の開発を理解するのは基本的に問題ありません。設定に慣れたら、ツールクラスをカプセル化してみてください。

要約する

これで、Vue2 が Axios を使用してリクエストを開始する方法についての説明は終わりです。Vue2 が Axios を使用してリクエストを開始する方法についての関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue2でaxios httpリクエストを使用する問題を解決する
  • vue2.0 proxyTable で axios を使用してクロスドメイン リクエストを行う方法
  • Vue axios リクエストのタイムアウトの正しい処理
  • Vue axios 同期リクエストソリューション
  • Vue での Ajax リクエストに Axios を使用する詳細な説明
  • vue+axios グローバル追加リクエスト ヘッダーとパラメータ操作

<<:  Centos7 で NIS を構成する詳細な手順

>>:  HTMLデータ送信投稿_PowerNode Java Academy

推薦する

Linux でプロセスを効果的に管理するための 8 つのコマンド

序文プロセス管理の役割:サーバーの健全性状態を判定する: プロセスの状態 (メモリ、CPU 占有率な...

mysql8.0 Windows x64 zip パッケージのインストールと構成のチュートリアル

MySQL 8 Windows版 zipインストール手順(ダウンロードアドレス) 1. ZIPファイ...

ReactプロジェクトでのTypeScriptの実装

目次1. はじめに2. 使用方法ステートレスコンポーネントステートフルコンポーネント制御コンポーネン...

sqlmap インジェクションの詳細なグラフィック説明

目次1. この Web サイトには SQL インジェクションの脆弱性がある可能性があることが判明しま...

純粋な CSS で中空効果を実現するためのサンプルコード

私は最近、空洞化効果について研究しました。背景クリップ: テキスト背景はテキストの前景色にクリップさ...

Linux で binlog ファイルの作成時間を表示するコマンド

目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...

MySQL フラッシュリストとダーティページフラッシュメカニズム

1. レビューMySQL の起動後にバッファ プールが初期化されます。バッファ プールは N 個の空...

自己終了XHTMLタグを書くときに注意すべきこと

XHTMLの img タグは、次のように記述する必要があります: <img alt="...

MySQL で単一のデータベースまたはテーブルを復元する方法と、起こりうる落とし穴

序文:最も一般的に使用される MySQL 論理バックアップ ツールは mysqldump です。通常...

Nginx フォワード プロキシとリバース プロキシ、および負荷分散機能の構成コード例

この記事は主に、Nginx のフォワード プロキシとリバース プロキシ、および負荷分散機能の設定コー...

HTML、CSS、JSコメントの標準的な使用法の概要

必要なコメントを追加することは、責任感と道徳心のあるフロントエンド開発者が持つべき良い習慣であり、コ...

XHTML 入門チュートリアル: Web ページのヘッダーと DTD

ヘッドと DTD はページには表示されませんが、Web ページの重要な要素です。 なぜ失敗したのでし...

ユーザーのニーズがマーケティング指向のデザインにつながる

<br />それぞれのトピックについて、チーム内でメールで議論します。議論が白熱するにつ...

Docker ベースの Redis クラスターの構築方法

Redisイメージをダウンロードする docker pull yyyyttttwww/redis を...

Mysql 8.0.17 winx64バージョンのインストール中に発生した問題を解決する

1. my.iniファイルを手動で作成して追加する # クライアントセクション # --------...