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

rrreee

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!