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 をインストールするチュートリアル

推薦する

Alibaba Cloud ServerにMySQLデータベースをインストールする方法の詳細な説明

序文学習中に Zookeeper をインストールする必要があったため、仮想マシンに常に問題が発生した...

ハンドラー PageHandlerFactory-Integrated のモジュール リストに不正なモジュール ManagedPipelineHandler が含まれています

Web プロジェクトを開発する場合、IIS をインストールする必要があります。IIS がインストール...

Reactはグローバル箇条書きボックスメソッドをカプセル化します

この記事の例では、Reactカプセル化グローバルポップアップボックスの具体的なコードを参考までに共有...

HTML の空リンク href="#" と href="javascript:void(0)" の違い

# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...

jQueryはスライディングタブを実装する

この記事では、スライドタブを実装するためのjQueryの具体的なコードを参考までに紹介します。具体的...

CSSフローティングとフローティング解除について

フロートの定義要素を通常のドキュメント フローから外し、要素を左また​​は右に近づけます。親要素の端...

CSS の高度な使い方(実戦で活用)

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...

JavaScript 文字列オブジェクトメソッド

目次文字列オブジェクトのメソッド方法 1: indexOf() (推奨)方法 2: search()...

Linux で scp コマンドを使用してファイルをリモートでコピーする方法の詳細な説明

序文scp は secure copy の略です。scp は、Linux システムの ssh ログイ...

Linuxパフォーマンス監視コマンドの簡単な紹介

システムでさまざまな IO ボトルネック、メモリ使用量の増加、CPU 使用率の増加などの問題が発生し...

Node.js の fs モジュールと Path モジュールのメソッドの詳細な説明

概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...

Angular の 12 の典型的な問題について簡単に説明します

目次1. Angular 2 アプリケーションのライフサイクル フックとは何ですか? 2. Angu...

Vueシャトルボックスは上下の動きを実現します

この記事の例では、vueシャトルボックスを上下に動かすための具体的なコードを参考までに共有しています...

JS ベースのページフローティングボックスを実装するためのサンプルコード

スクロール バーを下に引くと、主にposition:fixed;スタイルにより、フローティング ボッ...

CSSでスペースを処理する方法

1. 宇宙のルールHTML コード内の空白は通常、ブラウザによって無視されます。 <p>...