axios gère l'envoi http de Post et obtient

Cette fois, je vais vous apporter le traitement axios http envoi Post et obtenir, le traitement axios http envoi Post et obtenir quelles sont les précautions, ce qui suit est un cas pratique, jetons un coup d'œil.

Documentation chinoise axios 

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

En termes de traitement des requêtes http, il n'est plus recommandé d'utiliser vue-resource. Utilisez plutôt le dernier axios. Voici une brève introduction.

Installer

Utiliser le nœud

npm install axios

Utiliser cdn

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

Utilisation de baseMéthodes

obtenir la demande

// 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);
 });

Demande de publication

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

Exécuter plusieurs requêtes simultanément

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
 }));

La méthode d'utilisation est en fait la même que celle de l'ajax natif, et vous pouvez la comprendre en un coup d'œil.

Utilisez le formulaire application/x-www-urlencoded pour la demande de publication :

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);
 });

Document de référence d'utilisation spécifique : https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format

Remarque : Pour les demandes de publication, généralement, le premier paramètre est l'URL, le deuxième paramètre correspond aux données du corps de la demande à envoyer et le troisième paramètre est la configuration de la demande.

De plus : axios utilise par défaut le format application/json. Si qs.stringify n'est pas applicable, le format final du type de contenu sera toujours json même si l'en-tête de requête est ajouté.

Pour les demandes de publication, nous pouvons également utiliser le jquery ajax suivant pour implémenter :

    $.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 () {
     }
    });

Évidemment, par comparaison, on peut constater que le formulaire de demande de jquery est plus simple et que le format de données par défaut de jqury est application/x-www-urlencoded, ce qui est plus pratique à cet égard.

De plus, pour deux requêtes identiques, même si les deux requêtes aboutissent, les résultats obtenus par les deux requêtes sont différents

Ce n'est pas difficile à voir : les résultats renvoyés en utilisant axios seront emballés avec une couche de plus que la structure (résultats réels) renvoyée par l'ajax de jquery, y compris la configuration associée, les en-têtes, les requêtes, etc.

Pour les requêtes get, je recommande personnellement d'utiliser axios.get(), comme indiqué ci-dessous :

 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);
 });

Autrement dit, le premier paramètre est : url, et le deuxième paramètre est un objet de configuration. Nous pouvons définir des paramètres dans l'objet de configuration pour transmettre des paramètres.

Personnellement, je comprends pourquoi get n'a pas de deuxième paramètre comme requête passée chaîne , alors que post a un deuxième paramètre comme données de publication.

Parce que get ne peut avoir aucune chaîne de requête ni requête get, mais post doit avoir des données de publication, sinon il n'est pas nécessaire d'utiliser post.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

JS affiche la barre de progression lors du téléchargement de fichiers

Fonction d'affichage d'image de composant frontal de couche

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!