Vueでaxiosを簡単にカプセル化する方法

Vueでaxiosを簡単にカプセル化する方法

Vueにaxiosを挿入する

'axios' から axios をインポートします。
Vue.prototype.$axios = axios;
'axios' から axios をインポートします

axios.defaults.timeout = 5000; //応答時間 axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'; //リクエストヘッダーを構成する axios.defaults.withCredentials= true; //Cookieあり
axios.defaults.baseURL = 'http://localhost:8080/'; //インターフェースアドレスの設定 //POSTパラメータのシリアル化(リクエストインターセプターの追加)
axios.interceptors.request.use((config) => {
	// バックエンドに応じて、ここでシリアル化コードを追加できます。私が使用する SSM バックエンドは Json オブジェクトを受け入れます。シリアル化が必要な場合は、qs コンポーネント return config を使用できます。
},(エラー) =>{
    console.log('間違ったパラメータが渡されました')
    Promise.reject(error) を返します。
});

//ステータス判定を返す(レスポンスインターセプターを追加)
axios.interceptors.response.use((res) => {
    // 応答データを使って何かする if (!res.data.success) {
        Promise.resolve(res) を返します。
    }
    res を返します。
}, (エラー) => {
    console.log('ネットワーク異常')
    Promise.reject(error) を返します。
});

// Promise を返す (POST リクエストを送信する)
エクスポート関数 fetchPost(url, params) {
    新しい Promise を返します ((resolve, reject) => {
        axios.post(url, パラメータ)
            .then(応答 => {
                解決(応答);
            }, エラー => {
                拒否(エラー);
            })
            .catch((エラー) => {
                拒否(エラー)
            })
    })
}
Promise を返す (get リクエストを送信する)
エクスポート関数 fetchGet(url, param) {
    新しい Promise を返します ((resolve, reject) => {
        axios.get(url, {params: param})
            .then(応答 => {
                解決(応答)
            }, エラー => {
                拒否(エラー)
            })
            .catch((エラー) => {
                拒否(エラー)
            })
    })
}
エクスポートデフォルト{
    フェッチポスト、
    取得、
}

簡単なテスト:

loginPost: 関数() {
		パラメータ = {
			'パスワード': '123',
			'ユーザー名': 'admin'
		}
		http.fetchPost('/login', params).then((データ) => {
			コンソール.log(データ)
		}).catch(エラー => {
			コンソール.log(エラー)
		})
	},
こんにちは: 関数() {
		http.fetchGet('/hello', "").then((データ) => {
			コンソール.log(データ)
		}).catch(エラー => {
			コンソール.log(エラー)
		})
	},

投稿リクエスト:

リクエストを取得:

クロスドメインの問題、バックエンドの構成は次のとおりです。

SpringMVC.xml でクロスドメインを構成します。

<!-- インターフェースのクロスドメイン構成 -->
    <mvc:cors>
        <!-- allowed-methods="*" --> <!-- すべてのリクエストが有効であることを意味します -->
        <mvc:mapping path="/**" allowed-origins="*"
                     許可されるメソッド="POST、GET、OPTIONS、DELETE、PUT"
                     allowed-headers="コンテンツタイプ、アクセス制御許可ヘッダー、認証、X-Requested-With"
                     許可資格情報="true"/>
    </mvc:cors><!-- インターフェースのクロスドメイン構成 -->

インターフェース構成:

Vue で設定する vue.config.js を作成します。

モジュール.エクスポート = {
  開発サーバー: {
    プロキシ: {
        '/api': {
            ターゲット: 'http://127.0.0.1:8080',
            // 仮想サーバーがローカルに作成され、要求されたデータが同時に送受信されるため、サーバーとサーバーが相互にやり取りするときにクロスドメインの問題は発生しません。changeOrigin: true、 
            ws: 真、
            パス書き換え: {
                '^/api': '' 
                // ターゲット内のリクエスト アドレスを置き換えます。つまり、今後 http://api.jisuapi.com/XXXXX のアドレスをリクエストする場合は、/api と記述するだけです。}
        }
    }
  }
}

バックエンドも正常にクッキーを取得できます。

もちろん、次の設定に注意してください。これがクッキーの理由です

axios.defaults.withCredentials = true;

要約する

これで、axios を vue で簡単にカプセル化する方法についての記事は終わりです。より関連性の高い vue カプセル化 axios コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • TypeScript を使用して Vue3 で axios をカプセル化する詳細な例
  • Vueでaxiosをカプセル化する方法
  • axiosリクエストをvueでカプセル化する方法
  • Vueでaxiosをカプセル化するいくつかの方法
  • Vue における AXIOS カプセル化の詳細な説明

<<:  MySQL ステートメントに一重引用符またはバックスラッシュを含む値を挿入する方法

>>:  Centos に MYSQL8.X をインストールするチュートリアル

推薦する

CSS スタイルが機能しない (史上最も完全な解決策の概要)

ページを作成するときに、記述した CSS スタイルが有効にならないことがあります。この現象にはさまざ...

Linux環境でのActiveMQ導入方法の詳しい説明

この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...

React useEffect の理解と使用

目次繰り返しレンダリングループを避ける副作用の除去についてReact16.8 の新しい useEff...

Dockerコンテナを作成、起動、停止する方法

1. コンテナとは、独立して実行されるアプリケーション、またはアプリケーションのグループとその動作環...

ウェブデザインでよくある間違いのまとめ

Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...

MySQL 8.0.19 インストール詳細チュートリアル (Windows 64 ビット)

目次MySQLを初期化するMySQL サービスをインストール + MySQL サービスを開始MySQ...

Vueモバイル端末は画面上で指をスライドさせる方向を判定する

vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...

JavaScriptはPromiseを使用して複数の繰り返しリクエストを処理します

1. なぜこの記事を書くのですか?重複リクエストの処理に関する記事をたくさん読んだことがあるでしょう...

文字列から指定された文字を削除または抽出する JavaScript メソッド (非常によく使用されます)

目次1. 部分文字列() 2. サブストラクチャ() 3.インデックス() 4.最後のインデックス(...

要素 el-button ボタンコンポーネントの使用の詳細な説明

1. 背景ボタンは非常によく使われており、Element のボタン機能は非常に包括的です。この記事で...

Telnet は Alpine イメージの busybox-extras に移動されました

Alpine イメージの telnet はバージョン 3.7 以降、busybox-extras パ...

Linux システム (Centos6.5 以上) のインストール JDK チュートリアル分析

記事の構成1. 準備2. Java JDK8.0をインストールする3. 環境変数を設定する3. イン...

JavaScript 配列メソッドの詳細な例

目次導入配列の作成作成方法詳しい説明方法参加する() push() と pop() shift() ...

Docker を使用して Jenkins をインストールするためのサンプル コード

Dockerコンテナのインストール時に遭遇しやすい2つの問題1.ポートはすでに割り当てられています(...

React-Native スクリーンショットコンポーネント react-native-view-shot の紹介と使い方のまとめ

目次1. 現象2. 解決策3. 要約: 1. 現象1. 要件: 特定の表示ページをキャプチャしてアル...