Es gibt tatsächlich mehrere Möglichkeiten, HTTP-Header mit Axios zu senden. Du kannst beispielsweise ein Konfigurationsobjekt verwenden, wie hier beschrieben, oder die Instanzmethoden nutzen, die die von dir übergebene Konfiguration automatisch mit der Instanzkonfiguration zusammenführen. Du kannst auch das Objekt `axios.defaults.headers.common` verwenden, um Standard-Header für alle Axios-Anfragen festzulegen.
Beachte außerdem, dass Axios ein Promise-basierter HTTP-Client ist. Das bedeutet, dass wir entweder innerhalb einer asynchronen Funktion darauf warten müssen oder die Antwort auflösen müssen.
Mit diesen beiden Aspekten im Hinterkopf wollen wir nun mit dem eigentlichen Programmieren beginnen. Wir werden in der Datei „index.js“ arbeiten. Der Einfachheit halber fassen wir zunächst noch einmal zusammen, was wir tun müssen:
- Importiere `axios` in unsere Datei
- Ein Konfigurationsobjekt definieren, das unsere Header enthält
- Die Konfiguration an `axios` übergeben, um eine Anfrage zu stellen
- Die Antwort in unserem Terminal ausgeben
#1: Senden einer GET-Anfrage mithilfe des Konfigurationsobjekts
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)
})
Das Senden von HTTP-Headers mit Axios ist denkbar einfach. Um dieses Skript auszuführen, führen Sie einfach den folgenden Befehl in Ihrem Terminal aus:
~ » 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'
}
}
}
Die gesamte Antwort ist recht umfangreich und folgt diesem Schema. Was uns jedoch am meisten interessiert, ist der `data`-Teil, der die eigentliche Antwort enthält, die wir vom Server erhalten haben. Sehen Sie sich nun die obige Antwort an. Denken Sie daran, dass wir einen benutzerdefinierten Header `Http-Axios-Headers` an den Server gesendet haben, und wie Sie sehen können, hat der Server diesen auch empfangen.
#2: Senden einer POST-Anfrage mithilfe des Methoden-Alias
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))
Beachten Sie, dass ich, um eine POST-Anfrage zu senden, ein neues `data`-Objekt zu unserem Skript hinzugefügt und auch die URL geändert habe. Wenn Sie nun das Skript ausführen, werden Sie feststellen, dass dies die vom Server empfangenen Daten sind:
{
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'
}
