Brève introduction d'axios et l'utilisation d'axios en vue (détaillé)

Répertoire d'articles

Si vous voulez apprendre quelque chose, c'est le plus important d'en avoir une compréhension approfondie! ! !
Axios est une sorte d'encapsulation de la technologie ajax par promesse, similaire à l'encapsulation d'ajax par jQuery, mais nous utilisons vue pour développer uniquement en utilisant ajax, mais il est très déraisonnable d'introduire l'ensemble de JQuery (le schéma d'emballage personnalisé ne peut pas profiter de CDN Service) non recommandé! ! !

Axios en bref

Axios est en fait un ajax encapsulé, qui est essentiellement une encapsulation de XHR natif, sauf qu'il s'agit d'une version d'implémentation de Promise et conforme aux dernières spécifications ES.
Caractéristiques d'axios:
1. Créer XMLHttpRequest à partir du navigateur
2. Support Promise API
3. Support client pour empêcher CSRF
4. Fournir des interfaces de requête simultanées (important, pratique pour de nombreuses opérations)
5. Créer à partir de node.js Requête HTTP
6. Requête et réponse d'interception
7. Convertir les données de requête et de réponse
8. Annuler la requête
9. Convertir automatiquement les données JSON
PS: Empêcher CSRF: En termes simples, laissez chaque requête que vous avez apportée une du cookie Clé, selon la même politique d'origine du navigateur, le faux site Web ne peut pas obtenir la clé de votre cookie. De cette manière, l'arrière-plan peut facilement identifier si la demande est une entrée trompeuse de l'utilisateur sur le faux site Web et adopter la stratégie appropriée. Plus de détails peuvent être trouvés dans cet article

contraste axios avec ajax

extrait de code ajax:

$.ajax({
          url:'/frontMenu',
          type:'post',
          dataType:'json',//xml,html,script,jsonp,text类型
          data:{
                  menuName:this.menuName //按具体模块是否需要传参
              }, 
           success:function(response){
                          console.log(response)
                   }
           })

(ajax réalise le rafraîchissement des données partielles de la page Web)
extrait de code axios (l'API axios que j'utilise ici):

 axios({
       url:'/frontMenu',
       method:'post',
       responseType:'json',//默认为json，
       data:{
                  menuName:this.menuName //按具体模块是否需要传参
            } })
               .then(funtion(response){
                   console.log(response)
                })
                  .catch(function(error){
                        console.log(error)
                   })

Ajoutez le responseType d'axios:

Valeur (responseType)	type de données
''	DOMString
tampon de tableau	Objet ArrayBuffer (tableau typé)
goutte	Objet Blob (en plus de stocker des données binaires, vous pouvez également définir le type MINE de ces données)
document	Objet de document
json	Objet JavaScript, analysé à partir d'une chaîne JSON renvoyée par le serveur
texte	DOMString

Avantages et inconvénients

ajax:
1. Ajax est principalement destiné au modèle de programmation MVC. Il fait encore défaut dans le framework MVVC frontal actuel.
2. Basé sur le développement XHR natif, l'architecture de XMR elle-même n'est pas claire, bien qu'il y ait déjà une extraction (mais axios a aidé Notre emballage est assez pratique, pourquoi devons-nous dépenser beaucoup d'efforts pour apprendre à récupérer et à récupérer n'est pas si confortable à utiliser, il doit être emballé.)

axios est la caractéristique mentionnée ci-dessus, et il fournit une encapsulation simultanée et une petite taille.

ps: Quant à l'extraction, l'objet de promesse dans ES6 est utilisé, et il est conçu sur la base de la promesse Mais ce n'est pas une encapsulation d'ajax mais de js natifs, et n'utilise pas l'objet XMLHttpBequest.

En parlant de cela, voulez-vous vraiment savoir comment utiliser axios dans des projets spécifiques (๑￫‿ ฺ ￩๑)

Utilisation d'axios

Vue avait à l'origine un plugin ajax officiellement recommandé vue-resource, mais depuis que Vue a été mis à jour vers 2.0, le fonctionnaire ne met plus à jour vue-resource. Tous les projets courants actuels de Vue choisissent axios pour compléter les requêtes ajax

installation axios

Introduisez axios dans le répertoire de fichiers correspondant npm install --save axios vue-axios
ou
utilisez cdn :
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Première méthode (modifier la chaîne prototype):
dans le fichier mian

import axios from 'axios'

Vue.prototype.$axios = axios  //改变

Lorsque le composant est utilisé

      that.$axios
        .post("/frontMenu",{
                  menuName:this.menuName //按具体模块是否需要传参
        })
        .then(response => {
          console.log(response)
        })
        .catch(function(error) {
          console.log(error)
        });

Méthode deux (combinée avec vue-axios)
vue-axios est écrite à la manière des plugins vue. Puis combiné avec vue-axios, vous pouvez utiliser la méthode vue.use.
Dans le fichier principal

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

Utilisé dans les composants

      this.axios.post('/frontMenu',{
                  menuName:this.menuName //按具体模块是否需要传参
      })
      .then((response)=>{
          console.log(response)
      }).catch((response)=>{
        console.log(error)
      });

Utilisation d'axios

Usage régulier

      this.axios.post('/frontMenu',{
                  menuName:this.menuName //按具体模块是否需要传参
      })
      .then((response)=>{
          console.log(response)
      }).catch((response)=>{
        console.log(error);
      })

ps: méthode get, remplacez simplement post par get, il ne sera pas répertorié séparément ici

API axios

Vous pouvez créer une requête en transmettant la configuration appropriée à axios.

this.axios({
               method:'post',
               url:'/frontMenu',
               data:{
                  menuName:this.menuName //按具体模块是否需要传参
                 },
                 //修改请求头
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded"
                        }
                })  
                  .catch(function(error) {
                         console.log(error)
                   });

Demande d'utilisation de l'en-tête

1.Content-Type: application/json
这种是axios默认的请求数据类型，我们只需将参数序列化json字符串进行传递即可，
无需多余的配置
2.Content-Type: multipart/form-data
<input>元素的type属性必须为file
3.Content-Type:application/x-www-form-urlencoded
请求体中的数据会以普通表单形式（键值对）发送到后端

Concurrence d'axios (axios.all, axios.spread)

   let axiosList=[
   axios.get('url1',{params:xxx,dateType:'JSON'}),
   axios.get('url2',{params:xxx,dateType:'TEXT'}),
]
axios.all(axiosList).then(axios.spread(function(res1,res2){
  console.log(res1,res2)//分别是两个请求的返回值
})

Demande d'alias de méthode

axios.request (config)
axios.get (url [, config])
axios.delete (url [, config])
axios.head (url [, config])
axios.post (url [, data [, config]])
axios.put (url [, data [, config]])
axios.patch (url [, data [, config]])
ps: Lors de l'utilisation de la méthode alias, l'url, la méthode et les données ne doivent pas être spécifiées dans la configuration.

Problèmes courants liés au passage de valeur

1. Il s'agit d'une paire clé-valeur lorsque le premier plan est passé et que l'arrière-plan est difficile à recevoir.
Solution: Utilisez la bibliothèque qs fournie avec axios pour sérialiser les paramètres
. Présentez d'abord
import Qs from "qs";
les paramètres aux composants à utiliser .

let data= Qs.stringify({
userName:this.userName,
passWord:this.passWord
})
this.axios({
               method:'post',
               url:'/frontMenu',
               data:data
                })       
                .then((response)=>{
          console.log(response)
                 }) 
                .catch(function(error) {
                         console.log(error)
                   });

console.log (data)
result: userName = hahahaha && passWord = 1234567
résout parfaitement le problème (ฅ ´ω` ฅ)
Ajouter:

qs.parse () analyse l'URL sous la forme d'un objet

Lorsque nous devons passer un tableau, nous pouvons le gérer de la manière suivante:
Par défaut, ils donnent un index clair, comme dans le code suivant:
qs.stringify ({a: ['b', 'c', 'd' ]});
// 'a [0] = b & a [1] = c & a [2] = d'
peut également être réécrit. La méthode par défaut est false
qs.stringify ({a: ['b', 'c' , 'd']}, {indices: false});
// 'a = b & a = c & a = d'
Bien sûr, vous pouvez également formater la sortie via l'option arrayFormat, comme indiqué dans le code suivant:
qs.stringify ({a: [ 'b', 'c']}, {arrayFormat: 'indices'})
// 'a [0] = b & a [1] = c'
qs.stringify ({a: ['b', 'c']} , {arrayFormat: 'brackets'})
// 'a [] = b & a [] = c'
qs.stringify ({a: ['b', 'c']}, {arrayFormat: 'repeat'})
// 'a = b & a = c'

2. Téléchargez des images.
Solution: vous devez modifier l'en-tête de la demande et la soumettre avec le formulaire

  uploadFile(file) {
      this.formDate.append("file", file.file);
    },

 submitUpload() {
 this.formDate = new FormData();
 let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
that.axios
          .post("/api/pictureUpload", this.formDate, config)
          .then(response => {
            console.log(response);          
          })
          .catch(response => {
            console.log(response);
          });
          }

ps: j'utilise le contrôle de téléchargement d'image dans element-ui

Pour résumer

Le choix d'axios est en ligne avec la tendance actuelle de développement front-end, et il est petit et facile à utiliser. Pour plus d'informations sur la configuration axios, laissez-la plus tard (๑˘ ˘๑). Cet article explique l'utilisation de base d'axios et axios, et l'utilisation de l'encapsulation axios + vuex sortira dans le futur! ! !

Cet article est légèrement gonflé. Merci d'avoir regardé ꒰๑´ • .̫ • `๑꒱