Maison  >  Article  >  interface Web  >  Introduction à la configuration simple d'axios avec vue.js

Introduction à la configuration simple d'axios avec vue.js

不言
不言original
2018-06-29 11:54:581525parcourir

Cet article présente principalement la méthode de configuration simple d'axios avec vue.js. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

axios est basé sur une promesse. Application.Pour les navigateurs et les clients HTTP nodejs, l'article suivant vous présente principalement les informations pertinentes sur la configuration simple d'axios avec vue.js. Les amis qui en ont besoin peuvent s'y référer. Les amis qui en ont besoin peuvent venir apprendre ensemble.

Avant-propos

Officiellement, je ne recommande plus d'utiliser la ressource. Nous ne pouvons pas prendre de retard si nous passons à axios. Au moins, vous devez savoir. Allez, vous pouvez vous vanter auprès de l'intervieweur pendant l'entretien et ne pas dire trop de bêtises.

Lui-même présente les caractéristiques suivantes :

  • Créer une XMLHttpRequest depuis le navigateur

  • Faire des requêtes http à partir de node.js

  • API de promesse de support

  • Intercepter les requêtes et les réponses

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

  • Annuler la demande

  • Convertir automatiquement les données JSON

  • Support client empêcher CSRF/XSRF

Méthode de configuration

Première installation avec npm

npm install --save axios vue-axios

Après l'installation, configurez-le dans votre fichier main.js et ajoutez ces deux phrases

import axios from 'axios'
Vue.prototype.$http = axios

Puis quand vous lisez les données de l'interface, vous pouvez les écrire directement comme ceci. C'est la même chose que la ressource. L'op, l'uin et ainsi de suite sont les paramètres à transmettre.

this.$http.post(localStorage.getItem("addUrl")+'/skynet_sync/btsp', {
       "op": "update_card_num",
       "uin": uin,
       "protypeId": index,   
       "cardNumber": parseInt(v)
      })
      .then(response=> {
      //如果接口走成功就执行这里
      }).catch(function (error) {
      //接口失败,也就是state不是200的时候,走这里
      });

D'accord, c'est fait !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser les instructions de Vue.js pour implémenter la fonction de sélection totale

Analyse sur le utilisation du routage vue

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn