Comment passer des appels d'interface dans Vue

Dans le développement Web moderne, l'appel d'interface est une fonction très courante. Vue est un framework JavaScript frontal. En tant que framework MVVM, il inclut de nombreuses prises en charge des appels d'interface, ce qui permet aux développeurs d'effectuer plus facilement des appels d'interface. Cet article explique comment effectuer des appels d'interface dans Vue.

1. Installez axios

axios est une bibliothèque HTTP populaire basée sur Promise qui peut être utilisée dans les navigateurs et Node.js. Cela peut nous aider à effectuer facilement des appels d'interface dans Vue. Pour utiliser axios, nous devons d'abord l'installer dans le projet.

Ouvrez le terminal dans le répertoire racine du projet Vue et exécutez la commande suivante :

npm install axios --save

2. Créez un appel d'interface

Dans le composant Vue, les appels d'interface peuvent être implémentés en définissant des méthodes. Ce qui suit est un exemple d'utilisation d'axios pour appeler l'interface.

methods: {
  getUser() {
    axios.get('/api/user')
      .then(response => {
         //处理响应
         console.log(response.data);
      })
      .catch(error => {
         //处理错误
         console.log(error);
      });
  }
}

Le code ci-dessus montre un exemple d'obtention d'informations utilisateur. La méthode axios.get envoie une requête GET, et /api/user est l'adresse de l'interface. Lorsque l'appel d'interface réussit, nous stockons le corps de la réponse (c'est-à-dire les données renvoyées par l'interface) dans la variable response pour traitement. Lorsqu'une erreur se produit, nous stockons les informations d'erreur dans la variable. erreurcode> pour le traitement. axios.get方法发送GET请求，/api/user是接口的地址。当接口调用成功时，我们将响应体（即接口返回的数据）存入变量response中进行处理，当出现错误时，我们将错误信息存入变量error中进行处理。

3.配置axios

除了基本的GET请求外，我们还可以使用axios发送POST、PUT、DELETE等其他类型的请求。我们也可以在请求中添加headers、请求体等信息。为此，我们需要在Vue项目中进行axios的配置。

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8080';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json';

上述代码展示了一个axios配置的例子。axios.defaults.baseURL是指定axios默认的请求地址。axios.defaults.headers.common和axios.defaults.headers.post分别是配置每个请求和POST请求默认的headers信息。

4.在Vue组件中使用接口数据

在经过接口调用后，我们通常需要将接口返回的数据在Vue组件中展示。为此，我们需要将数据存入Vue实例中的data对象。

data() {
   return {
      user: {}
   }
},
mounted() {
   this.getUser();
},
methods: {
   getUser() {
      axios.get('/api/user')
         .then(response => {
            this.user = response.data;
         })
         .catch(error => {
            console.log(error);
         });
   }
}

上述代码展示了一个Vue组件展示用户信息的例子。在data对象中，定义了一个名为user

3. Configurer axios

En plus des requêtes GET de base, nous pouvons également utiliser axios pour envoyer d'autres types de requêtes telles que POST, PUT, DELETE, etc. Nous pouvons également ajouter des en-têtes, le corps de la demande et d'autres informations à la demande. Pour ce faire, nous devons configurer axios dans le projet Vue.

rrreee

Le code ci-dessus montre un exemple de configuration axios. axios.defaults.baseURL spécifie l'adresse de requête par défaut d'axios. axios.defaults.headers.common et axios.defaults.headers.post configurent respectivement les informations d'en-tête par défaut pour chaque requête et requête POST. 🎜🎜4. Utiliser les données d'interface dans les composants Vue🎜🎜Après avoir appelé l'interface, nous devons généralement afficher les données renvoyées par l'interface dans le composant Vue. Pour ce faire, nous devons stocker les données dans l'objet de données dans l'instance Vue. 🎜rrreee🎜Le code ci-dessus montre un exemple de composant Vue affichant des informations utilisateur. Dans l'objet de données, une variable nommée user est définie pour stocker les données renvoyées par l'interface. Dans la requête ajax, lorsque les données sont renvoyées, nous stockons les données dans l'objet de données dans l'instance Vue et les affichons dans le modèle. 🎜🎜Résumé🎜🎜Dans cet article, nous avons présenté comment effectuer des appels d'interface dans Vue. Nous pouvons facilement implémenter des appels d'interface en installant axios et en configurant ses valeurs par défaut. Dans le composant Vue, nous pouvons stocker les données renvoyées par l'interface dans l'instance Vue et les afficher dans le modèle. Cela nous permet d'obtenir et de gérer facilement des données et d'améliorer l'efficacité du développement d'applications Web. 🎜

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!