Vue + Axios リクエストインターフェース方式とパラメータ渡し方式の詳しい説明

Vue スキャフォールディングで構築されたフロントエンド プロジェクトでは、通常、Axios でカプセル化されたインターフェース リクエストが使用されます。プロジェクトで導入されるメソッドについては詳しく説明しません。この記事では、主にインターフェース呼び出しとさまざまな形式のパラメーター渡しメソッドを紹介します。

1. リクエストを取得する:

GET リクエストは比較的単純で、通常はパラメータを URL に連結し、? & または次のように接続します。

this.axios.get(this.getWxQyUserInfoUrl, {
パラメータ: {
エージェントID: this.doLoginParams.agentid、
コード: this.doLoginParams.code
}
})

2. 投稿リクエスト:

1) フォームデータFormDataパラメータ送信方法①axios設定、リクエストヘッダーを設定する：ヘッダー
Accept: text/plain、text/html --クライアントが受信できるコンテンツタイプを指定します
Content-Type: Content-Type: application/x-www-form-urlencoded -- 要求されたエンティティに対応する MIME 情報は、通常、次のように設定されます。
this.axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //リクエストヘッダーを構成する //JSON形式: 'application/json; charset=UTF-8'
クライアントが受け入れ可能なコンテンツタイプを指定します。通常は、main.jsのグローバルカプセル化リクエストで指定します。

axios.interceptors.request.use(config => {
// クライアントが受信できるコンテンツ タイプを指定します config.headers.Accept = "application/json, text/plain,*/*"
設定を返します。
}, エラー => Promise.error(error)
）

個別の応答例外処理を設定する場合と同様です。

axios.interceptors.response.use(レスポンス => {
// システムエラー応答を返します。
}, エラー => {
// 必要に応じて、リクエスト エラーをネットワーク例外ページにリダイレクトできます。console.log("メイン ページは axios 例外をキャプチャします: "+JSON.stringify(error));
// ルータ.push({
// パス: "/networkerr",
// 名前: "networkerr"
// });
})

②リクエストインターフェースカプセル化ファイルで、qsミドルウェアを導入します。リクエストメソッドがpostの場合、パラメータはqs.stringify関数を介してフォーマットに変換する必要があります。
qsモジュールはaxiosに組み込まれているため、ダウンロードする必要はありません。コアを直接インポートすると、パラメータが標準のキー値グローバル参照メソッドに変換されます。main.js内

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

次に、各ページでthis.$qs.stringify(params)直接使用して、単一のページ参照を使用できます。

var qs = require('qs');
this.axios.post(this.postUrl,qs.stringify({"値1":100,"値2":"123"}))

2) JSON文字列パラメータ渡し方法 ① axios設定、リクエストヘッダーを設定する: Head

this.axios.defaults.headers['Content-Type'] = 'application/json; charset=UTF-8'; //リクエストヘッダーを構成する

② リクエストパラメータはSON.stringify()関数を使用して変換するか、変換せずに直接渡すことができます。

this.axios.post(this.imageSaveUrl、JSON.stringify(params)) より

3. 拡張と補足

最後に、設定 Web サービス インターフェイスを添付して、XML 形式ではなく JSON 形式で応答を直接返します。
データが返される方法を変更し、return ステートメントの代わりに Context.Response.Write を使用すると、次のように Json 形式でデータを返すことができます。

Context.Response.Charset = "utf-8"; //文字セットの種類またはGB2312を設定します
Context.Response.ContentEncoding = System.Text.Encoding.UTF8; // または System.Text.Encoding.GetEncoding("GB2312");
コンテキスト.Response.Write(jaoData);
コンテキスト.Response.End();

Vue + Axios リクエストインターフェースメソッドとパラメータの受け渡しに関するこの記事はこれで終わりです。Vue Axios リクエストインターフェースの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。