Axios を使用して Angular で FormData をサービスに渡す方法は?

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

問題:

Angular アプリケーションには、以下を行う必要があるフォームがあります。 Axios を使用してサービスに送信する場合、_boundary ヘッダーをフォームの _boundary プロパティの値に設定したいとします。ただし、Axios インスタンス内からフォーム データにアクセスすることはできません。

解決策:

デフォルトでは、Axios は特定のリクエストに対して Content-Type ヘッダーを自動的に設定します。 FormData を含む本文の形式。 FormData インスタンスをリクエスト本文として渡すと、Axios は自動的に Content-Type ヘッダーを multipart/form-data に設定し、MIME 境界トークンを処理します。

コードで従う手順は次のとおりです。

1. コンポーネントでフォーム データをディスパッチします:

<code class="js">//component.js

const form = new FormData();

form.append('email', '[email protected]')
form.append('password', '12121212')

dispatch(FetchLogin.action(form))</code>

2. サービスで API 呼び出しを準備します:

<code class="js">//loginService.js

import api from '@/Services'

export default async form => {
  const response = await api.post('user/login/', form)
  return response.data
}</code>

3. Axios インスタンスでサービスを消費します:

<code class="js">//Services/index.js

import axios from 'axios'
import { Config } from '@/Config'

const instance =  axios.create({
  baseURL: Config.API_URL,
})

instance.post('fetch-login', { form })</code>

フォーム オブジェクトをリクエスト本文ペイロードの form プロパティを使用すると、Axios は Content-Type ヘッダーを自動的に処理し、適切な MIME 境界トークンを使用して multipart/form-data に設定します。 form._boundary プロパティに直接アクセスする必要はありません。

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