Detaillierte Erläuterung der Schritte zur Verwendung von Axios (mit Code)

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von Axios (mit Code) ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Axios? Hier sind praktische Fälle.

Axios ist eine Promise-basierte HTTP-Bibliothek, die in Browsern und node.js verwendet werden kann. Aufgrund der Empfehlung von Youda erfreut sich Axios immer größerer Beliebtheit. Ich bin in den letzten Projekten auf einige Probleme bei der Verwendung von Axios gestoßen, daher werde ich diese Gelegenheit nutzen, sie zusammenzufassen. Wenn es Fehler gibt, können Sie diese gerne korrigieren.

Funktion

Der Browser initiiert eine XMLHttpRequests-Anfrage

Die Knotenschicht initiiert eine http-Anfrage

Support Promise API

Abfangen von Anfragen und Antworten

Anfrage- und Antwortdaten konvertieren

Anfrage stornieren

JSON-Daten automatisch konvertieren

Der Client unterstützt die Abwehr von XSRF (Cross-Site Request Forgery)

npm
npm install axios

Bower
Bower Install Axios

cdn

Stellen Sie eine Anfrage

GET

axios.get('/user?ID=123')
  .then( res => {
    console.info(res)
  }).catch( e => {
    if(e.response){
    //请求已发出，服务器返回状态码不是2xx。
      console.info(e.response.data)
      console.info(e.response.status)
      console.info(e.response.headers)
    }else if(e.request){
      // 请求已发出，但没有收到响应
      // e.request 在浏览器里是一个XMLHttpRequest实例，
      // 在node中是一个http.ClientRequest实例
      console.info(e.request)
    }else{
      //发送请求时异常，捕捉到错误
      console.info('error',e.message)
    }
    console.info(e.config)
  })
// 等同以下写法
axios({
  url: '/user',
   method: 'GET',
  params: {
    ID: 123
  }
}).then( res => {
  console.info(res)
}).catch( e=> {
  console.info(e)
})

POST

axios.post('/user', {
  firstName: 'Mike',
  lastName: 'Allen'
}).then( res => {
  console.info(res)
}).catch( e => {
  console.info(e)
})
// 等同以下写法
axios({
  url: '/user',
  method: 'POST',
  data: {
    firstName: 'Mike',
    lastName: 'Allen'
  }
}).then( res => {
  console.info(res)
}).catch( e => {
  console.info(e)
})

Notizen

Bei der Übergabe von Parametern mit der GET-Methode werden Parameter verwendet, und in der offiziellen Dokumentation wird Folgendes eingeführt: Parameter sind die URL-Parameter an muss mit der Anfrage gesendet werden. Muss ein einfaches Objekt oder ein URLSearchParams sein Objekt. Übersetzt als: params wird als Parameter im URL-Link zum Senden der Anfrage verwendet und muss ein einfaches Objekt oder URLSearchParams sein Objekt. Ein einfaches Objekt bezieht sich auf ein gewöhnliches Objekt, das im JSON-Format oder neu definiert ist Einfache Objekte, die von Object(); während URLSearchParams erstellt wurden Objekt bezieht sich auf eine Reihe von Dienstprogrammmethoden, die von der URLSearchParams-Schnittstelle zur Verarbeitung von URLs definiert werden können Das Abfrageobjekt

Zeichenfolge

, d. h. der Parameter params, wird in der Form /user?ID=1&name=mike&sex=male übergeben. Bei Verwendung von POST werden Daten für die entsprechende Parameterübertragung verwendet und als Anforderungshauptteil gesendet. Dieses Formular wird auch für PUT, PATCH und andere Anforderungsmethoden verwendet. Zu beachten ist, dass der Standard-Anforderungskörpertyp von POST in Axios Content-Type: application/json ist (JSON-Spezifikation ist beliebt), was auch der häufigste Anforderungskörpertyp ist, was bedeutet, dass das serialisierte JSON-Format verwendet wird. Zeichenfolge zur Übergabe von Parametern, z. B.: { „Name“: „Mike“, „Geschlecht“: „männlich“ }; Gleichzeitig muss das Backend Parameter in Form von @RequestBody empfangen, sonst übergibt das Frontend die Parameter korrekt, das Backend kann sie jedoch nicht empfangen.

Wenn Sie den Typ auf Content-Type:application/x-www-form-urlencoded (native Browserunterstützung) festlegen möchten, bietet axios zwei Methoden wie folgt:

Browserseite

Allerdings unterstützen nicht alle Browser URLSearchParams. Überprüfen Sie caniuse.com auf Kompatibilität, aber hier ist ein Polyfill (Polyfill: Code, der zum Implementieren nativer APIs verwendet wird, die der Browser nicht unterstützt, was vage als Patch verstanden werden kann. Gleichzeitig) Stellen Sie sicher, dass die Polyfüllung in der globalen Umgebung vorhanden ist.

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/user', params);

Alternativ können Sie zur Formatierung der Daten auch die qs-Bibliothek verwenden. Standardmäßig kann die qs-Bibliothek nach der Installation von axios verwendet werden.

const qs = require('qs');
axios.post('/user', qs.stringify({'name':'mike'}));

Knotenschicht

Querystring kann in der Knotenumgebung verwendet werden. Ebenso können Sie qs auch zum Formatieren von Daten verwenden.

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({'name':'mike'}));

Ergänzung

Es gibt einen weiteren häufigen Anforderungstexttyp, nämlich Multipart/Formulardaten (von Browsern nativ unterstützt), ein häufig verwendetes Format zum Senden von Formulardaten. Im Vergleich zu x-www-form-urlencoded sind letztere die Daten, die als codiert sind „&“ trennt Schlüssel-Wert-Paare, während „=“ Schlüssel und Werte trennt. Nicht alphanumerische oder numerische Zeichen werden prozentual codiert (URL Codierung), weshalb dieser Typ keine Binärdaten unterstützt (stattdessen sollte multipart/form-data verwendet werden).

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie die Angular4-Eingabe und -Ausgabe

Fügen Sie ein Popup-Dialogfeld im WeChat-Applet hinzu

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von Axios (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!