FormData を使用して Axios のサービスにデータを渡すにはどうすればよいですか?

Axios のサービスにデータを渡す

ブラウザからデータを送信する場合、Axios は特定のリクエスト本文の形式を自動的に処理し、適切な Content-Type ヘッダーを設定します。データを multipart/form-data として送信し、Content-Type ヘッダーを手動で構成する場合は、FormData インスタンスをリクエスト本文として渡すことでこれを行うことができます。 Axios はヘッダーを multipart/form-data に自動的に設定します。 boundary=${form._boundary}.

<code class="javascript">import axios from 'axios';

const form = new FormData();
form.append('email', 'user@example.com');
form.append('password', 'secretpassword');

axios.post('user/login', form)
  .then((response) => {
    // Handle response
  })
  .catch((error) => {
    // Handle error
  });</code>

Node.js での FormData の処理

Node.js で Axios を使用する場合、FormData から Content-Type ヘッダーが自動的に推論されません。インスタンス。これを回避するには、リクエスト インターセプターを使用できます。

<code class="javascript">axios.interceptors.request.use((config) => {
  if (config.data instanceof FormData) {
    Object.assign(config.headers, config.data.getHeaders());
  }
  return config;
}, null, { synchronous: true });</code>

または、リクエストを行うときにヘッダーを手動でマージできます。

<code class="javascript">axios.post('user/login', body, {
  headers: {
    'X-Any-Other-Headers': 'value',
    ...body.getHeaders(),
  },
});</code>

結論

結論として、FormData インスタンスを使用し、リクエスト オプションを適切に構成することで、loginService.js から Services/index.js にデータを渡し、マルチパート/フォームデータ リクエストをシームレスに処理できます。

以上がFormData を使用して Axios のサービスにデータを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。