Comment transmettre FormData à un service dans Angular à l'aide d'Axios ?

Transmettre les données au service dans Axios

Problème :

Dans une application angulaire, vous avez un formulaire qui doit être soumis à un service utilisant Axios et vous souhaitez définir l'en-tête _boundary sur la valeur de la propriété _boundary du formulaire. Cependant, vous ne pouvez pas accéder aux données du formulaire depuis l'instance Axios.

Solution :

Par défaut, Axios définit automatiquement l'en-tête Content-Type pour certaines requêtes. formats de corps, y compris FormData. Lorsque vous transmettez une instance FormData comme corps de la requête, Axios définira automatiquement l'en-tête Content-Type sur multipart/form-data et gérera les jetons de limite MIME pour vous.

Voici les étapes à suivre dans votre code :

1. Déployez les données du formulaire dans votre composant :

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

const form = new FormData();

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

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

2. Préparez l'appel API dans votre service :

<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. Consommer le service dans votre instance 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>

En passant l'objet formulaire comme objet form dans la charge utile du corps de la requête, Axios gérera automatiquement l'en-tête Content-Type et le définira sur multipart/form-data avec les jetons de limite MIME appropriés. Vous n'aurez pas besoin d'accéder directement à la propriété form._boundary.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!