Na verdade, existem várias formas de enviar cabeçalhos HTTP com o Axios. Por exemplo, pode utilizar um objeto de configuração, conforme descrito aqui, ou pode utilizar os métodos de instância, que irão automaticamente mesclar a configuração que passar com a configuração da instância. Também pode utilizar o objeto `axios.defaults.headers.common` para definir cabeçalhos padrão para todas as solicitações do Axios.
Além disso, note que o Axios é um cliente HTTP baseado em promessas. Isto significa que teremos de aguardar por ele dentro de uma função assíncrona ou resolver a resposta.
Tendo estes dois aspetos em mente, vamos começar com alguma programação real. Iremos trabalhar no ficheiro «index.js». Por conveniência, vamos recapitular o que precisamos de fazer antes:
- Importar `axios` para o nosso ficheiro
- Definir um objeto de configuração que irá conter os nossos cabeçalhos
- Passar a configuração para `axios` para fazer uma solicitação
- Imprimir a resposta no nosso terminal
#1: Enviar uma solicitação GET usando o objeto de configuração
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 cabeçalhos HTTP com o Axios é extremamente simples. Para executar este script, basta executar o seguinte comando no seu 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'
}
}
}
A resposta completa é bastante extensa e segue este esquema. No entanto, o que mais nos interessa é o `data`, que contém a resposta efetiva que recebemos do servidor. Agora, analise a resposta acima. Lembre-se de que enviámos um cabeçalho personalizado `Http-Axios-Headers` para o servidor e, como pode ver, o servidor recebeu-o.
#2: Enviar um pedido POST utilizando o alias do 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))
Repara que, para enviar uma solicitação POST, adicionei um novo objeto `data` ao nosso script e também alterei a URL. Agora, se executares o script, verás que estes são os dados recebidos do 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'
}
