Explication détaillée des étapes pour utiliser axios (avec code)

Cette fois, je vais vous apporter une explication détaillée des étapes pour utiliser axios (avec code). Quelles sont les précautions lors de l'utilisation d'axios. Voici des cas pratiques, jetons un coup d'oeil.

Axios est une bibliothèque HTTP basée sur Promise qui peut être utilisée dans les navigateurs et node.js Grâce à la recommandation de Youda, axios est devenu de plus en plus populaire. J'ai rencontré quelques problèmes lors de l'utilisation d'axios dans des projets récents, j'en profiterai donc pour les résumer. S'il y a des erreurs, n'hésitez pas à les corriger.

Fonction

Le navigateur initie une requête XMLHttpRequests

La couche nœud initie une requête http

API de promesse de support

Intercepter les demandes et les réponses

Convertir les données de demande et de réponse

Annuler la demande

Convertir automatiquement les données JSON

Le client prend en charge la défense contre XSRF (contrefaçon de requêtes intersites)

npm
npm installer axios

bower
bower installer axios

cdn

Faire une demande

OBTENIR

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

Remarques

Les paramètres sont utilisés lors de la transmission de paramètres à l'aide de la méthode GET, et la documentation officielle introduit : les paramètres sont les paramètres d'URL à utiliser. être envoyé avec la demande. Doit être un objet simple ou un URLSearchParams. objet. Traduit comme suit : params est utilisé comme paramètre dans le lien URL pour envoyer la requête, et il doit s'agir d'un objet simple ou d'URLSearchParams. objet. L'objet simple fait référence à un objet ordinaire défini sous forme JSON ou nouveau Objets simples créés par Object(); while URLSearchParams L'objet fait référence à un certain nombre de méthodes utilitaires qui peuvent être définies par l'interface URLSearchParams pour gérer les URL. La requête

string

objet, c'est-à-dire le paramètre params est passé sous la forme /user?ID=1&name=mike&sex=male. Lors de l'utilisation de POST, le transfert de paramètres correspondant utilise des données et les données sont envoyées en tant que corps de requête. Ce formulaire est également utilisé pour PUT, PATCH et d'autres méthodes de requête. Une chose à noter est que le type de corps de requête par défaut de POST dans axios est Content-Type : application/json (la spécification JSON est populaire), qui est également le type de corps de requête le plus courant, ce qui signifie que le format json sérialisé est utilisé. pour transmettre des paramètres, tels que : { "nom" : "mike", "sexe" : "homme" }; En même temps, le backend doit recevoir les paramètres sous une forme prenant en charge @RequestBody, sinon le frontend transmettra les paramètres correctement mais le backend ne pourra pas les recevoir.

Si vous souhaitez définir le type sur Content-Type:application/x-www-form-urlencoded (prise en charge native du navigateur), axios propose deux méthodes, comme suit :

Côté navigateur

Cependant, tous les navigateurs ne prennent pas en charge URLSearchParams. Vérifiez la compatibilité sur caniuse.com, mais voici un Polyfill (polyfill : code utilisé pour implémenter des API natives non prises en charge par le navigateur, qui peut être vaguement compris comme un correctif. En même temps, assurez-vous que le polyfill dans l’environnement global).

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

Alternativement, vous pouvez également utiliser la bibliothèque qs pour formater les données. Par défaut, la bibliothèque qs peut être utilisée après l'installation d'axios.

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

couche de nœuds

La chaîne de requête peut être utilisée dans l'environnement de nœud. De même, vous pouvez également utiliser qs pour formater les données.

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

Supplément

Il existe un autre type de corps de requête courant, à savoir multipart/form-data (supporté nativement par les navigateurs), qui est un format couramment utilisé pour soumettre des données de formulaire. Par rapport à x-www-form-urlencoded, ce dernier correspond aux données codées comme '&' sépare les paires clé-valeur, tandis que '=' sépare la clé et la valeur. Les caractères non alphanumériques ou numériques seront codés en pourcentage (URL encodage), c'est pourquoi ce type ne prend pas en charge les données binaires (multipart/form-data doit être utilisé à la place).

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 :

Comment utiliser l'entrée et la sortie Angular4

Ajouter une boîte de dialogue contextuelle dans l'applet WeChat

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!