Comment transmettre des données aux services dans Axios avec FormData ?

Transmission de données aux services dans Axios

Lors de la transmission de données à partir d'un navigateur, Axios gère automatiquement certains formats de corps de requête et définit les en-têtes Content-Type appropriés. Si vous souhaitez envoyer des données sous forme de multipart/form-data et configurer manuellement l'en-tête Content-Type, vous pouvez le faire en transmettant une instance FormData comme corps de la requête. Axios définira automatiquement l'en-tête sur multipart/form-data ; border=${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>

Gestion de FormData dans Node.js

Lors de l'utilisation d'Axios dans Node.js, il ne déduit pas automatiquement les en-têtes Content-Type de FormData cas. Pour contourner ce problème, vous pouvez utiliser un intercepteur de requêtes.

<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>

Ou, vous pouvez fusionner manuellement les en-têtes lorsque vous effectuez une requête.

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

Conclusion

En conclusion, en utilisant les instances FormData et en configurant les options de requête de manière appropriée, vous pouvez transmettre les données de loginService.js à Services/index.js et gérer les requêtes multipart/form-data de manière transparente.

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!