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

npm インストール axios --save

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

// 指定された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(応答);
  } キャッチ（エラー）{
    コンソールエラー(エラー);
  }
}

アクシオス({
  メソッド: 'get'、
  URL: '/getUser',
  パラメータ: {
    id: 12345,
  }
})
  .then(関数 (応答) {
    console.log(応答);
  });

axios.post('/createUser', {
    名: 'フレッド',
    姓: 'フリントストーン'
  })
  .then(関数 (応答) {
    console.log(応答);
  })
  .catch(関数 (エラー) {
    コンソール.log(エラー);
  });

    // POSTリクエストを送信する
    アクシオス({
      メソッド: 'post'、
      url: '/createUser',
      data: { // ここでのdataのパラメータはrequestBodyパラメータです。サーバーは@RequestBodyアノテーションを使用してfirstName: 'Fred'を取得する必要があります。
        姓: 'フリントストーン'
      }
    }).then(関数 (応答) {
      console.log(応答);
    }).catch(関数(エラー) {
      コンソール.log(エラー);
    });

関数 getUserAccount() {
  axios.get('/user/12345') を返します。
}
 
関数 getUserPermissions() {
  axios.get('/user/12345/permissions') を返します。
}
 
axios.all([ユーザーアカウントを取得()、ユーザー権限を取得()])
  .then(axios.spread(関数(acct, perms) {
    // 両方のリクエストが完了しました
  }));

{
  // `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(関数(キャンセル) {
  })
}

{
  // `data` はサーバーから提供された応答です
  データ： {}、
 
  // `status` はサーバー応答からの HTTP ステータス コードです
  ステータス: 200、
 
  // `statusText` はサーバー応答からの HTTP ステータス メッセージです
  ステータステキスト: 'OK'、
 
  // `headers` サーバーが応答した HTTP ヘッダー
  // すべてのヘッダー名は小文字になっており、括弧表記を使用してアクセスできます。
  // 例: `response.headers['content-type']`
  ヘッダー: {},
 
  // `config` はリクエストのために `axios` に提供された設定です
  設定: {},
 
  // `request` はこのレスポンスを生成したリクエストです
  // これは node.js 内の最後の ClientRequest インスタンスです (リダイレクト内)
  // ブラウザ内のXMLHttpRequestインスタンス
  リクエスト： {}
}

axios.get('/user/12345')
  .then(関数 (応答) {
    console.log(応答データ);
    console.log(応答ステータス);
    console.log(応答ステータステキスト);
    console.log(レスポンスヘッダー);
    コンソールログ(response.config);
  });

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.create({
  ベースURL: 'https://api.example.com'
});
 
// インスタンス作成後にデフォルトを変更する
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

// リクエストインターセプターを追加する
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.create();
インスタンスインターセプターのリクエストで関数を使用します（）{/*...*/）;