Reactにaxios依存関係をインストールして導入するReact プロジェクトで axios リクエストを使用するには、まず axios をインストールする必要があります。 npm インストール axios --save 次に、TypeScript を使用して、React ファイルに axios 依存関係をインポートします。 'axios' から axios をインポートします。 GETリクエストにaxiosを使用するaxios で GET リクエストを使用する方法は 2 つあります。
axios.get メソッドの使用カプセル化された axios.get を使用してリクエストを行う一般的な形式は次のとおりです。 // 指定されたIDのユーザーに対してリクエストを行う axios.get('/getUser?id=12345') .then(関数 (応答) { // 成功を処理する console.log(応答); // 状態を更新するか何かを行う this.setState({ // ... }) }) .catch(関数 (エラー) { // エラーを処理する コンソール.log(エラー); }) .then(関数() { // 常に実行される }); // オプションとして、上記のリクエストは次のようにも実行できます。 axios.get('/getUser', { params: { // ここでのパラメータは URL パラメータとして設定されます (URL によって運ばれるパラメータに従って) id: 12345 } }) .then(関数 (応答) { console.log(応答); }) .catch(関数 (エラー) { コンソール.log(エラー); }) .then(関数() { // 常に実行される }); // async/await を使いたいですか? 外側の関数/メソッドに `async` キーワードを追加します。 非同期関数 getUser() { 試す { const レスポンス = axios.get('/getUser?id=12345'); console.log(応答); } キャッチ(エラー){ コンソールエラー(エラー); } } axios(config {...}) を使用するaxios(config {...}) を使用して GET リクエストを送信する形式は次のとおりです。 アクシオス({ メソッド: 'get'、 URL: '/getUser', パラメータ: { id: 12345, } }) .then(関数 (応答) { console.log(応答); }); 上記の get リクエストによって送信される URL は次のとおりです。
axiosを使用したPOSTリクエストGET リクエストと同様に、POST を使用するリクエスト メソッドが 2 つあります。 axios.post の使用axios.post('/createUser', { 名: 'フレッド', 姓: 'フリントストーン' }) .then(関数 (応答) { console.log(応答); }) .catch(関数 (エラー) { コンソール.log(エラー); }); axios(config {...}) を使用する// POSTリクエストを送信する アクシオス({ メソッド: 'post'、 url: '/createUser', data: { // ここでのdataのパラメータはrequestBodyパラメータです。サーバーは@RequestBodyアノテーションを使用してfirstName: 'Fred'を取得する必要があります。 姓: 'フリントストーン' } }).then(関数 (応答) { console.log(応答); }).catch(関数(エラー) { コンソール.log(エラー); }); axios(config {}) を使用して GET または POST リクエストを送信する場合、GET リクエストの params は URL パラメータであり、POST リクエストの data は RequestBody パラメータであることに注意してください。これを受信するにはサーバー上で @RequestBody アノテーションを使用する必要があり、Spring Boot はこれを対応する Java オブジェクトに自動的に解析できます。 複数のリクエストを同時に送信するaxios を使用して複数のリクエストを一度に送信することもできます。 関数 getUserAccount() { axios.get('/user/12345') を返します。 } 関数 getUserPermissions() { axios.get('/user/12345/permissions') を返します。 } axios.all([ユーザーアカウントを取得()、ユーザー権限を取得()]) .then(axios.spread(関数(acct, perms) { // 両方のリクエストが完了しました })); 詳細な設定オブジェクトの設定項目axios の readme ドキュメントには、config オブジェクトの具体的な構成手順が次のように記載されています。 { // `url` はリクエストに使用されるサーバーの URL です URL: '/ユーザー', // `method` はリクエストを行うときに使用するリクエストメソッドです メソッド: 'get', // デフォルト // `url` が絶対パスでない限り、`baseURL` が `url` の先頭に追加されます。 // 相対URLを渡すためにaxiosのインスタンスに`baseURL`を設定すると便利です // そのインスタンスのメソッドに。 ベースURL: 'https://some-domain.com/api/', // `transformRequest` は、リクエストデータをサーバーに送信する前に変更できるようにします // これはリクエストメソッド 'PUT'、'POST'、'PATCH'、および 'DELETE' にのみ適用されます // 配列の最後の関数は文字列またはBuffer、ArrayBufferのインスタンスを返す必要があります。 // FormData または Stream // ヘッダー オブジェクトを変更できます。 transformRequest: [関数 (データ、ヘッダー) { // データを変換するために必要なことはすべて実行します データを返します。 }], // `transformResponse` は、レスポンスデータの変更を // then/catchに渡されます transformResponse: [関数 (データ) { // データを変換するために必要なことはすべて実行します データを返します。 }], // `headers` は送信されるカスタムヘッダーです ヘッダー: {'X-Requested-With': 'XMLHttpRequest'}, // `params` はリクエストとともに送信される URL パラメータです // プレーンオブジェクトまたは URLSearchParams オブジェクトである必要があります パラメータ: { ID: 12345 }, // `paramsSerializer` は `params` のシリアル化を担当するオプションの関数です // (例: https://www.npmjs.com/package/qs、http://api.jquery.com/jquery.param/) paramsSerializer: 関数 (params) { Qs.stringify(params, {arrayFormat: 'brackets'}) を返します }, // `data` はリクエスト本文として送信されるデータです // リクエストメソッド 'PUT'、'POST'、および 'PATCH' にのみ適用されます // `transformRequest` が設定されていない場合は、次のいずれかのタイプである必要があります。 // - 文字列、プレーンオブジェクト、ArrayBuffer、ArrayBufferView、URLSearchParams // - ブラウザのみ: FormData、File、Blob // - ノードのみ: ストリーム、バッファ データ: { 名: 'フレッド' }, // 本文にデータを送信するための代替構文 // メソッド投稿 // キーではなく値のみが送信されます データ: '国=ブラジル&都市=ベロオリゾンテ', // `timeout` は、リクエストがタイムアウトするまでのミリ秒数を指定します。 // リクエストが `timeout` より長くかかる場合、リクエストは中止されます。 timeout: 1000, // デフォルトは `0` (タイムアウトなし) // `withCredentials` は、クロスサイトアクセス制御リクエストが // 資格情報を使用して作成する必要があります withCredentials: false, // デフォルト // `adapter` を使用すると、リクエストのカスタム処理が可能になり、テストが容易になります。 // プロミスを返し、有効な応答を提供します (lib/adapters/README.md を参照)。 アダプタ: 関数 (config) { /* ... */ }, // `auth` は HTTP 基本認証を使用する必要があることを示し、資格情報を提供します。 // これにより、既存のAuthorizationヘッダーが上書きされます。 // `headers` を使用して設定した `Authorization` カスタム ヘッダー。 // このパラメータでは HTTP 基本認証のみが設定可能であることに注意してください。 // Bearer トークンなどの場合は、代わりに `Authorization` カスタム ヘッダーを使用します。 認証: ユーザー名: 'janedoe', パスワード: 's00pers3cret' }, // `responseType` はサーバーが応答するデータのタイプを示します // オプションは 'arraybuffer'、'document'、'json'、'text'、'stream' です // ブラウザのみ: 'blob' responseType: 'json', // デフォルト // `responseEncoding` はレスポンスのデコードに使用するエンコーディングを示します // 注: `responseType` が 'stream' またはクライアント側リクエストの場合は無視されます responseEncoding: 'utf8', // デフォルト // `xsrfCookieName` は、xsrf トークンの値として使用する Cookie の名前です xsrfCookieName: 'XSRF-TOKEN', // デフォルト // `xsrfHeaderName` は、xsrf トークン値を運ぶ HTTP ヘッダーの名前です xsrfHeaderName: 'X-XSRF-TOKEN', // デフォルト // `onUploadProgress` はアップロードの進行状況イベントの処理を可能にします // ブラウザのみ onUploadProgress: 関数 (progressEvent) { // ネイティブの進行状況イベントで好きなことを行う }, // `onDownloadProgress` はダウンロードの進行状況イベントの処理を可能にします // ブラウザのみ onDownloadProgress: 関数 (progressEvent) { // ネイティブの進行状況イベントで好きなことを行う }, // `maxContentLength` は、許可される HTTP 応答コンテンツの最大サイズをバイト単位で定義します。 最大コンテンツ長: 2000、 // `validateStatus` は、指定されたPromiseを解決するか拒否するかを定義します。 // HTTPレスポンスステータスコード。`validateStatus`が`true`を返す場合(または`null`に設定されている場合) // または `undefined` の場合、promise は解決されます。それ以外の場合、promise は // 拒否されました。 検証ステータス: 関数 (ステータス) { ステータス >= 200 && ステータス < 300; を返します // デフォルト }, // `maxRedirects` は、node.js で追跡するリダイレクトの最大数を定義します。 // 0 に設定すると、リダイレクトは実行されません。 maxRedirects: 5, // デフォルト // `socketPath` は、node.js で使用される UNIX ソケットを定義します。 // たとえば、docker デーモンにリクエストを送信するには '/var/run/docker.sock' を使用します。 // `socketPath` または `proxy` のいずれかのみを指定できます。 // 両方が指定されている場合は、`socketPath` が使用されます。 socketPath: null, // デフォルト // `httpAgent` と `httpsAgent` は、http を実行するときに使用するカスタムエージェントを定義します。 // およびhttpsリクエストをそれぞれnode.jsで実行します。これにより、次のようなオプションを追加できます。 // デフォルトでは有効になっていない `keepAlive` 。 httpAgent: 新しい http.Agent({keepAlive: true })、 httpsAgent: 新しい https.Agent({keepAlive: true })、 // `proxy` はプロキシ サーバーのホスト名とポートを定義します。 // 従来の `http_proxy` を使用してプロキシを定義することもできます。 // `https_proxy` 環境変数。環境変数を使用している場合 // プロキシ設定では、`no_proxy` 環境を定義することもできます // プロキシしないドメインのコンマ区切りリストとして変数を指定します。 // 環境変数を無視してプロキシを無効にするには `false` を使用します。 // `auth` はプロキシへの接続に HTTP 基本認証を使用する必要があることを示し、 // 資格情報を提供します。 // これにより、既存の `Proxy-Authorization` ヘッダーが上書きされます。 // `headers` を使用して設定した `Proxy-Authorization` カスタム ヘッダー。 プロキシ: { ホスト: '127.0.0.1', ポート: 9000、 認証: ユーザー名: 'mikeymike'、 パスワード: 'rapunz3l' } }, // `cancelToken` はリクエストをキャンセルするために使用できるキャンセルトークンを指定します // (詳細は下記のキャンセルセクションを参照) cancelToken: 新しいCancelToken(関数(キャンセル) { }) } Axios 戻り値オブジェクト応答リクエスト後に axios によって取得されるレスポンス オブジェクトの形式は次のとおりです。 { // `data` はサーバーから提供された応答です データ: {}、 // `status` はサーバー応答からの HTTP ステータス コードです ステータス: 200、 // `statusText` はサーバー応答からの HTTP ステータス メッセージです ステータステキスト: 'OK'、 // `headers` サーバーが応答した HTTP ヘッダー // すべてのヘッダー名は小文字になっており、括弧表記を使用してアクセスできます。 // 例: `response.headers['content-type']` ヘッダー: {}, // `config` はリクエストのために `axios` に提供された設定です 設定: {}, // `request` はこのレスポンスを生成したリクエストです // これは node.js 内の最後の ClientRequest インスタンスです (リダイレクト内) // ブラウザ内のXMLHttpRequestインスタンス リクエスト: {} } リクエスト後にthenメソッドを使用すると、レスポンスオブジェクトの属性値を取得できます。ここで、dataはサーバーから返される対応するオブジェクトです。 axios.get('/user/12345') .then(関数 (応答) { console.log(応答データ); console.log(応答ステータス); console.log(応答ステータステキスト); console.log(レスポンスヘッダー); コンソールログ(response.config); }); Axios グローバル構成axios を使用する場合、axios オブジェクトをグローバルに設定できます。これは、次の設定のように、axios が配置されている現在の JavaScript クラス内のすべての axios リクエストに適用されます。 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; Axios シングルインスタンス構成axios をグローバルに設定する必要がない場合は、axios オブジェクトを使用するときに単一のオブジェクトを設定できます。次に例を示します。 // インスタンス作成時に設定のデフォルトを設定する 定数インスタンス = axios.create({ ベースURL: 'https://api.example.com' }); // インスタンス作成後にデフォルトを変更する instance.defaults.headers.common['Authorization'] = AUTH_TOKEN; axiosインターセプターの使用axios インターセプターを使用すると、リクエストを送信する前、またはレスポンスに応答する前 (then メソッド) にリクエストをインターセプトし、カスタム設定を行うことができます。以下は、リクエスト インターセプターとレスポンス インターセプターを定義する例です。 // リクエストインターセプターを追加する axios.interceptors.request.use(関数 (config) { // リクエストが送信される前に何かを行う 設定を返します。 }, 関数 (エラー) { // リクエストエラーに対して何らかの処理を実行する Promise.reject(error) を返します。 }); // レスポンスインターセプターを追加する axios.interceptors.response.use(関数 (response) { // 2xxの範囲内のステータスコードがこの関数をトリガーします // 応答データを使って何かする 応答を返します。 }, 関数 (エラー) { // 2xxの範囲外のステータスコードの場合、この関数がトリガーされます // レスポンスエラーに対して何らかの処理を実行する Promise.reject(error) を返します。 }); インターセプターを削除する必要がある場合は、次の手順を実行します。 const myInterceptor = axios.interceptors.request.use(function (){/*...*/); axios.interceptors.request.eject(myInterceptor); 定義したインターセプターをカスタム axios インスタンスに追加することもできます。 定数インスタンス = axios.create(); インスタンスインターセプターのリクエストで関数を使用します(){/*...*/); 上記の情報の一部は axios ドキュメントから参照されています。https://github.com/axios/axios を参照してください。 これで、React で axios を使用してリクエストを送信する一般的な方法についての説明は終了です。React で axios を使用してリクエストを送信する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQLの制限を使用して大規模なページングの問題を解決する方法
>>: Linux は、ディレクトリが存在するかどうかを判断するために if を使用します。
Dockerの主な機能は何ですか?現在、Docker には少なくとも次のアプリケーション シナリオが...
CentOS7 のデフォルトのファイアウォールは iptables ではなく、firewalle で...
通常、デッドロックが発生すると、重みが最も小さい接続が強制終了され、ロールバックされます。ただし、最...
これまでのブログ投稿では、HTML 5 ではあまり使われていないが注目すべき API やヒントに焦点...
MySQL ストアド プロシージャは、確かに、非常にまれな使用シナリオのように見えます。この問題は、...
はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのペ...
新しいプロジェクトは基本的に終了しました。フロントエンドとバックエンドを分離して統合を完了したのは初...
目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...
HTML ドキュメント内の要素は次々に配置され、ブロックレベル要素の前後に改行が追加されるだけで、合...
まずエラーコードを見てみましょう。 html: <テーブルボーダー="1"...
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
httpリターンコードリスト(以下は概要です)詳細な中国語の説明についてはここをクリックしてくださ...
MySql Nullフィールド判定とIFNULL失敗処理ps: (プロセスを表示したくない場合は、S...
以下のように表示されます。 //managefee_managefee テーブルの年と月を照会し、c...
1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...