Reactでaxiosを使用してリクエストを送信する一般的な方法

Reactでaxiosを使用してリクエストを送信する一般的な方法

Reactにaxios依存関係をインストールして導入する

React プロジェクトで axios リクエストを使用するには、まず axios をインストールする必要があります。

npm インストール axios --save

次に、TypeScript を使用して、React ファイルに axios 依存関係をインポートします。

'axios' から axios をインポートします。

GETリクエストにaxiosを使用する

axios で GET リクエストを使用する方法は 2 つあります。

  • 1つはaxios.getを使うことです
  • 1つはaxios(config { ... })を使用することです。

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 は次のとおりです。

http:HOST_IP:XXXX/getUser?id=12345

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React Nativeでaxiosを使用してネットワークリクエストを行う方法
  • 1 つ以上のドメイン名への React axios クロスドメイン アクセス
  • React+axios は github 検索ユーザー機能を実装します (サンプル コード)

<<:  MySQLの制限を使用して大規模なページングの問題を解決する方法

>>:  Linux は、ディレクトリが存在するかどうかを判断するために if を使用します。

推薦する

ウェブページでメモの詳細が灰色になる問題に対処する

1. IE では、相対的な配置、つまり <div style="background...

JS 非同期コードユニットテストの魔法 Promise

目次序文プロミスチェーンMDN エラー連鎖デフォルト処理略語非同期待機序文この記事を書いた理由は、ユ...

Nodejs-cluster モジュールの知識ポイントの概要と使用例

面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...

InnoDB がシリアル化分離レベルを実装する方法

シリアル化の実装InnoDB は 2 つの方法でシリアル化を実装します。まず、SELECT 文が明示...

Vue プロジェクトを実行するときに `--fix` オプションで修正できる可能性のある警告のエラー問題を解決します。

問題: vue-cil3 は、`--fix` オプションで修正できる可能性のある警告とともに実行され...

WIN10 に複数のデータベースがインストールされている場合にコンピュータの速度低下を防ぐ方法

必要なときにサービスを有効にし、必要がないときは無効にします。データベース サービスを管理する方法:...

Linux サーバーに Python3 をインストールする 2 つの方法

最初の方法Alibaba Cloud および Baidu Cloud サーバーが利用可能です。 ! ...

JSX を使用してコンポーネント パーサー開発を構築する例

目次JSX環境の構築プロジェクトの設定NPMを初期化するwebpackをインストールするBabelを...

Vue3 ミックスインの使い方

目次1. mixin の使い方は? 2. ミックスイン使用時の注意2.1. ミックスイン オブジェク...

MySQL 5.7 をインストールした後にコマンドライン ウィンドウを開くとクラッシュする問題の解決方法

序文最近、MySQL 5.7 をインストールしましたが、問題が見つかりました。コマンド ライン ウィ...

固定サイドバーを実現するためのJavaScript

固定サイドバーを実装するにはJavaScriptを使用します。参考までに、具体的な内容は次のとおりで...

node.js チュートリアルの Util モジュールの例の詳細な説明

目次タイプ判定から始める厳格な平等エラーファーストと約束デバッグと出力タイプ判定から始めるJavaS...

ウェブデザイナーのウェブデザイン学習経験とスキルのまとめ

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...

Nginx メモリプールのソースコード分析

目次メモリプールの概要1. nginxデータ構造2. nginxはOSからスペースngx_creat...

CSS3を使用してテキストの垂直配置を実現する方法

最近のプロジェクトでは、テキストを垂直に揃えたいと考え、CSS の writing-mode プロパ...