Pasar datos al servicio en Axios

Resuelto ilvthsgm asked hace 3 años • 1 respuestas

Quiero configurar _boundryen mi encabezado.

Primero, envío los datos del formulario:

//component.js

const form = new FormData();

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

dispatch(FetchLogin.action(form))

En segundo lugar, preparo la llamada a la API;

//loginService.js

import api from '@/Services'

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

En tercer lugar, hago una llamada a la API;

//Services/index.js

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

const instance =  axios.create({
  baseURL: Config.API_URL,
  headers: {
    'Content-Type': `multipart/form-data; boundary=${form._boundary}`, //Cannot access form here
  }, 
  timeout: 3000,
})

instance.interceptors.response.use(
  response => response,
  ({ message, response: { data, status } }) => {
    return handleError({ message, data, status })
  },
)

export default instance

Quiero acceder a formlos datos dentro de axios instancepara poder utilizarlos form._boundryen headers.

¿ Cómo puedo pasar formdatos de loginService.jsa Services/index.js?

Aug 04 '21 05:08 ilvthsgm

Aceptado

Al realizar solicitudes AJAX desde un navegador (a través fetchde o XMLHttpRequest), el tiempo de ejecución sabe qué hacer para ciertos formatos de cuerpo de solicitud y establecerá automáticamente el Content-typeencabezado apropiado.

Si el cuerpo de la solicitud es una FormDatainstancia, se Content-typeestablecerá multipart/form-datay también incluirá los tokens de límite MIME apropiados de la instancia de datos.

Todos estos ejemplos publicarán los datos como con los tokens de límite mimemultipart/form-data apropiados.

const body = new FormData();

// attach files and other fields
body.append("file", fileInput.files[0]);
body.append("foo", "foo");
body.append("bar", "bar");

// fetch
fetch(url, { method: "POST", body });

// XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.send(body);

// Axios
axios.post(url, body);

Si el cuerpo de la solicitud es una URLSearchParamsinstancia, se Content-typeestablecerá enapplication/x-www-form-urlencoded

Todos estos ejemplos publicarán los datos comoapplication/x-www-form-urlencoded

const body = new URLSearchParams({ foo: "foo", bar: "bar" });
// serialises to "foo=foo&bar=bar"

// fetch
fetch(url, { method: "POST", body });

// XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.send(body);

// Axios
axios.post(url, body);

Sólo necesita configurar manualmente content-typesi desea enviar datos de cadena en un formato particular, por ejemplo text/xml, application/json, etc., ya que el tiempo de ejecución no puede inferir el tipo a partir de los datos.

const body = JSON.stringify({ foo: "foo", bar: "bar" });

// fetch
fetch(url, {
  method: "POST",
  headers: {
    "content-type": "application/json",
  },
  body
});

// XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.setRequestHeader("content-type", "application/json");
xhr.send(body);

En Axios

Axios encadenará automáticamente las estructuras de datos de JavaScript pasadas al dataparámetro y establecerá el Content-typeencabezado application/jsonpara que solo necesite una configuración mínima cuando trabaje con API JSON.

// no extra headers, no JSON.stringify()
axios.post(url, { foo: "foo", bar: "bar" })

Bajo el capó, Axios utiliza XMLHttpRequestlas especificaciones FormDatay URLSearchParamstambién se aplican.

Axios v0.27.1 no funciona

Esta versión específica de Axios no puede realizar una solicitud adecuada con FormData. ¡No lo uses!

Axios v1.0.0+ está roto

Esto roza mi propia opinión, pero cada publicación de lanzamiento de Axios v1.0.0 se ha roto fundamentalmente de una forma u otra. Simplemente no puedo recomendar a nadie que lo use por ningún motivo.

Alternativas mucho mejores son:

La API Fetch (también disponible en Node v18+)
obtenido para Node.js
ky para navegadores

NodoJS

Cuando se utiliza Axios desde el backend, no inferirá Content-typeencabezados de FormDatalas instancias. Puede solucionar este problema utilizando un interceptor de solicitudes.

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

o simplemente fusionar los encabezados al realizar una solicitud

axios.post(url, body, {
  headers: {
    "X-Any-Other-Headers": "value",
    ...body.getHeaders(),
  },
});

Ver https://github.com/axios/axios#form-data

En jQuery $.ajax()

El método de jQuery $.ajax()(y métodos convenientes como $.post()) envía de forma predeterminada las cargas útiles del cuerpo de la solicitud como application/x-www-form-urlencoded. Las estructuras de datos de JavaScript se serializarán automáticamente usando jQuery.param() a menos que se le indique lo contrario. Si desea que el navegador configure automáticamente el Content-typeencabezado según el formato del cuerpo, también debe configurarlo en las opciones

const body = new FormData()
body.append("foo", "foo")
body.append("bar", "bar")

$.ajax({
  url,
  method: "POST",
  data: body,
  contentType: false, // let the browser figure it out
  processData: false  // don't attempt to serialise data
})

Aug 03 '2021 23:08 Phil