axiosの使い方を詳しく解説（コード付き）

今回は、axios を使用する手順 (コード付き) と、axios を使用する際の 注意事項 を詳しく説明します。また、以下は実際の事例です。見てみましょう。

Axios は、ブラウザーと node.js で使用できる Promise ベースの HTTP ライブラリです。Youda の推奨により、axios はますます人気が高まっています。最近のプロジェクトで axios を使用する際にいくつか問題が発生したので、この機会にまとめておきます。間違いがあれば、遠慮なく修正してください。

特徴

ブラウザが XMLHttpRequests リクエストを開始します

ノード層が http リクエストを開始します

Promise API をサポート

リクエストとレスポンスの傍受

リクエストとレスポンスのデータを変換する

リクエストのキャンセル

JSONデータを自動変換します

クライアントは XSRF (クロスサイト リクエスト フォージェリ) に対する防御をサポートしています

npm
npm インストール axios

bower
bower インストール axios

<スクリプト src="https://unpkg.com/axios/dist/axios.min.js"> リクエストしてください

ゲット りー

投稿 りー

メモ

Params は GET メソッドを使用してパラメータを渡すときに使用され、公式ドキュメントでは次のように紹介されています。 params は URL パラメータです。 リクエストと一緒に送信する必要があります。プレーン オブジェクトまたは URLSearchParams である必要があります。 物体。翻訳: params は、リクエストを送信するための URL リンクのパラメータとして使用され、プレーン オブジェクトまたは URLSearchParams である必要があります。 物体。プレーンオブジェクトとは、JSON 形式で定義された通常のオブジェクト、または新規オブジェクトを指します。 Object() によって作成された単純なオブジェクト、URLSearchParams; オブジェクトは、URL を処理するために URLSearchParams インターフェイスによって定義できる多数のユーティリティ メソッドを参照します。 クエリ

string

オブジェクト、つまり params パラメータは /user?ID=1&name=mike&sex=male の形式で渡されます。 POST を使用する場合、対応するパラメーターの転送にはデータが使用され、このフォームは PUT、PATCH などのリクエスト メソッドでも使用されます。注意すべき点の 1 つは、axios の POST のデフォルトのリクエストボディタイプは Content-Type: application/json (JSON 仕様が一般的です) であり、これは最も一般的なリクエストボディタイプでもあり、シリアル化された JSON 形式が使用されることを意味します。次のようなパラメータを渡します: { 「名前」：「マイク」、「性別」：「男性」 同時に、バックエンドは @RequestBody をサポートする形式でパラメーターを受け取る必要があります。そうしないと、フロントエンドはパラメーターを正しく渡しますが、バックエンドはパラメーターを受け取ることができません。

タイプを Content-Type:application/x-www-form-urlencoded (ネイティブ ブラウザ サポート) に設定する場合、axios は次の 2 つのメソッドを提供します。

ブラウザ側

りー

ただし、すべてのブラウザが URLSearchParams をサポートしているわけではありません。互換性については caniuse.com を確認してください。ただし、ここには Polyfill (ポリフィル: ブラウザがサポートしていないネイティブ API を実装するために使用されるコード。漠然とパッチとして理解できます) があります。ポリフィルが地球環境にあることを確認します）。 あるいは、qs ライブラリを使用してデータをフォーマットすることもできます。デフォルトでは、axios のインストール後に qs ライブラリを使用できます。

りー

ノードレイヤー

クエリ文字列はノード環境で使用できます。同様に、qs を使用してデータをフォーマットすることもできます。 りー

補足

もう 1 つの一般的なリクエスト本文タイプとして、multipart/form-data (ブラウザーによってネイティブにサポートされています) があります。これは、フォーム データを送信するために一般的に使用される形式です。 x-www-form-urlencoded と比較すると、後者は次のようにエンコードされたデータです。 「&」はキーと値のペアを区切りますが、「=」はキーと値を区切ります。英数字以外の文字はパーセントでエンコードされます (URL そのため、この型はバイナリ データをサポートしません (代わりに multipart/form-data を使用する必要があります)。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Angular4の入出力の使用方法

WeChatアプレットにポップアップダイアログボックスを追加する

以上がaxiosの使い方を詳しく解説（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。