En realidad, hay varias formas de enviar encabezados HTTP con Axios. Por ejemplo, puedes utilizar un objeto de configuración como se describe aquí, o puedes utilizar los métodos de instancia, que fusionarán automáticamente la configuración que pases con la configuración de la instancia. También puedes utilizar el objeto `axios.defaults.headers.common` para establecer los encabezados predeterminados para todas las solicitudes de Axios.
Además, ten en cuenta que Axios es un cliente HTTP basado en promesas. Esto significa que tendremos que esperar a que se resuelva dentro de una función asíncrona o resolver la respuesta.
Teniendo en cuenta estos dos aspectos, empecemos con algo de programación real. Trabajaremos dentro del archivo «index.js». Para mayor comodidad, recapitulemos lo que tenemos que hacer de antemano:
- Importar `axios` dentro de nuestro archivo
- Definir un objeto de configuración que contenga nuestros encabezados
- Pasar la configuración a `axios` para realizar una solicitud
- Imprimir la respuesta en nuestro terminal
#1: Enviar una solicitud GET utilizando el objeto de configuración
import axios from "axios"
const config = {
method: 'GET',
url: 'https://httpbin.org/headers',
headers: {
'HTTP-Axios-Headers': 'This is my custom header.'
}
}
axios(config)
.then((response) => {
console.log(response)
})
.catch((err) => {
console.log(err)
})
Enviar encabezados HTTP con Axios es muy sencillo. Para ejecutar este script, simplemente ejecuta el siguiente comando en tu terminal:
~ » node index.js
{
status: 200,
statusText: 'OK',
headers: ...,
config: ...,
request: ...,
data: {
headers: {
'Accept': 'application/json, text/plain, */*',
'Accept-Encoding': 'gzip, compress, deflate, br',
'Host': 'httpbin.org',
'Http-Axios-Headers': 'This is my custom header.',
'User-Agent': 'axios/1.2.2',
'X-Amzn-Trace-Id': 'Root=1-63b54d94-7656f02113483dfa036c476c'
}
}
}
La respuesta completa es bastante grande y sigue este esquema. Sin embargo, lo que más nos interesa es el `data`, que contiene la respuesta real que recibimos del servidor. Ahora echa un vistazo a la respuesta anterior. Recuerda que enviamos un encabezado personalizado `Http-Axios-Headers` al servidor y, como puedes ver, el servidor lo recibió.
#2: Enviar una solicitud POST utilizando el alias del método
import axios from "axios"
const data = {
'foo':'bar'
}
const config = {
headers: {
'HTTP-Axios-Headers': 'This is my custom header.'
}
}
axios.post('http://httpbin.org/post', data, config)
.then(response => console.log(response.data))
.catch(err => console.log(err))
Fíjate en que, para enviar una solicitud POST, he añadido un nuevo objeto `data` a nuestro script y también he cambiado la URL. Ahora, si ejecutas el script, verás que estos son los datos recibidos del servidor:
{
args: {},
data: '{"foo":"bar"}',
files: {},
form: {},
headers: {
Accept: 'application/json, text/plain, */*',
'Accept-Encoding': 'gzip, compress, deflate, br',
'Content-Length': '13',
'Content-Type': 'application/json',
Host: 'httpbin.org',
'Http-Axios-Headers': 'This is my custom header.',
'User-Agent': 'axios/1.2.2',
'X-Amzn-Trace-Id': 'Root=1-63b5508a-3a86493f087662d3169e80ee'
},
json: { foo: 'bar' },
origin: '49.12.221.20',
url: 'http://httpbin.org/post'
}
