Heim > Artikel > Web-Frontend > 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!