axios kümmert sich um das HTTP-Senden von Posts und Gets

Dieses Mal werde ich Ihnen die Axios-Verarbeitung von http-Senden Post und Get vorstellen, Axios-Verarbeitung von HTTP-Senden Post und Get, was die Vorsichtsmaßnahmen sind. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

axios Chinesische Dokumentation 

https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format Axios-Dokumentation

Für die Verarbeitung von http-Anfragen wird nicht mehr empfohlen, vue-resource zu verwenden. Hier finden Sie eine kurze Einführung.

Installieren

Verwenden Sie den Knoten

npm install axios

Verwenden Sie cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Grundlegende VerwendungMethoden

Anfrage erhalten

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
// Optionally the request above could also be done as
axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

Anfrage posten

 axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

Mehrere Anfragen gleichzeitig ausführen

function getUserAccount() {
 return axios.get('/user/12345');
}
function getUserPermissions() {
 return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
 .then(axios.spread(function (acct, perms) {
  // Both requests are now complete
 }));

Die Verwendungsmethode hierfür ist tatsächlich die gleiche wie beim nativen Ajax, und Sie können sie auf einen Blick verstehen.

Verwenden Sie das Formular application/x-www-urlencoded, Post-Anfrage:

var qs = require('qs');
 axios.post('/bbg/goods/get_goods_list_wechat', qs.stringify({"data": JSON.stringify({
  "isSingle": 1,
  "sbid": 13729792,
  "catalog3": 45908012,
  "offset": 0,
  "pageSize": 25
 })}), {
  headers: {
   "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
  }
 })
 .then(function (response) {
  // if (response.data.code == 626) {
   console.log(response);
  // }
 }).catch(function (error) {
  console.log(error);
 });

Spezifisches Nutzungsreferenzdokument: https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format

Hinweis: Bei Post-Anfragen ist im Allgemeinen der erste Parameter die URL, der zweite Parameter die zu sendenden Anfragetextdaten und der dritte Parameter die Konfiguration der Anfrage.

Außerdem: axios verwendet standardmäßig das application/json-Format. Wenn qs.stringify nicht anwendbar ist, ist das endgültige Inhaltstypformat weiterhin json, auch wenn der Anforderungsheader hinzugefügt wird.

Für Post-Anfragen können wir zur Implementierung auch den folgenden JQuery-Ajax verwenden:

    $.ajax({
     url:'api/bbg/goods/get_goods_list_wechat',
     data:{
      'data': JSON.stringify({
            "isSingle": 1,
            "sbid": 13729792,
            "catalog3": 45908012,
            "offset": 0,
            "pageSize": 25
          })    
     },  
     beforeSend: function(request) {
      request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6");
     }, 
     type:'post', 
     dataType:'json', 
     success:function(data){   
      console.log(data);
     },
     error: function (error) {
      console.log(err);
     },
     complete: function () {
     }
    });

Offensichtlich kann durch Vergleich festgestellt werden, dass das Anforderungsformular von jquery einfacher ist und das Standarddatenformat von jqury application/x-www-urlencoded ist, was in dieser Hinsicht praktischer ist.

Darüber hinaus sind bei zwei identischen Anfragen die von den beiden Anfragen erzielten Ergebnisse unterschiedlich, selbst wenn beide Anfragen erfolgreich sind

Es ist nicht schwer zu erkennen: Die von Axios zurückgegebenen Ergebnisse werden mit einer Schicht mehr gepackt als die Struktur (tatsächliche Ergebnisse), die von Jquerys Ajax zurückgegeben wird, einschließlich zugehöriger Konfiguration, Header, Anfrage usw.

Für Get-Anfragen empfehle ich persönlich die Verwendung von axios.get(), wie unten gezeigt:

 axios.get('/bbg/shop/get_classify', {
  params: {
   sid: 13729792
  },
  headers: {
   "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6"
  }
 })
 .then(function (response) {
  if (response.data.code == 130) {
   items = response.data.data;
   store.commit('update', items);
   console.log(items);
  }
  console.log(response.data.code);
 }).catch(function (error) {
  console.log(error);
  console.log(this);
 });

Das heißt, der erste Parameter ist: URL und der zweite Parameter ist ein Konfigurationsobjekt. Wir können Parameter im Konfigurationsobjekt festlegen, um Parameter zu übergeben.

Ich persönlich verstehe, warum get keinen zweiten Parameter als übergebene Abfrage--Zeichenfolge hat, während post einen zweiten Parameter als Post-Daten hat.

Denn get kann keine Abfragezeichenfolge oder Get-Anfrage haben, aber post muss Post-Daten haben, andernfalls besteht keine Notwendigkeit, post zu verwenden.

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:

JS zeigt Fortschrittsbalken beim Hochladen von Dateien an

Anzeigefunktion für Layer-Front-End-Komponentenbilder

Das obige ist der detaillierte Inhalt vonaxios kümmert sich um das HTTP-Senden von Posts und Gets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!