La méthode d'implémentation de fonction encapsulée par demande d'interface dans le document Vue

Vue est un framework frontal populaire pour créer des applications Web interactives. Dans les applications Web, les requêtes d’interface sont une partie essentielle. Afin de réduire le travail répétitif et la redondance du code, nous pouvons utiliser la fonction d'encapsulation des demandes d'interface pour traiter toutes les demandes d'interface de manière uniforme, rendant le code plus standardisé et plus facile à maintenir.

Cet article expliquera comment encapsuler les fonctions de requête d'interface dans Vue pour parvenir à la réutilisation et à la standardisation du code.

1. Configuration du projet

Tout d'abord, nous devons créer un projet Vue de base via Vue CLI pour des démonstrations ultérieures. Exécutez la commande suivante dans la ligne de commande :

vue create vue-request-demo

Une fois la création terminée, entrez dans le répertoire du projet et démarrez le serveur de développement :

cd vue-request-demo
npm run serve

Ensuite, nous encapsulerons la fonction de demande d'interface dans le projet.

2. Encapsuler les fonctions de demande d'interface

Nous pouvons créer un module nommé request.js pour encapsuler toutes les fonctions de demande d'interface. Ce module peut définir une requête de fonction, dont les paramètres incluent les paramètres d'URL et de requête :

import axios from 'axios'

const request = (method, url, data = {}) => {
  return axios({
    method,
    url,
    data
  })
    .then(res => res.data)
    .catch(e => {
      console.error(e)
    })
}

export default {
  get: (url, data) => request('GET', url, data),
  post: (url, data) => request('POST', url, data),
  put: (url, data) => request('PUT', url, data),
  delete: (url, data) => request('DELETE', url, data)
}

L'instance Axios est utilisée dans la fonction de requête d'interface, et les méthodes get, post, put et delete sont exposées. Ces méthodes correspondent aux méthodes GET, POST, PUT et DELETE dans les requêtes HTTP. Cette fonction renvoie également un objet Promise à utiliser lors de la demande de données de manière asynchrone.

3. Utilisez la fonction de demande d'interface

Maintenant, nous pouvons utiliser cette fonction de demande d'interface dans le composant Vue. Nous pouvons utiliser Vue CLI pour créer un composant nommé HelloWorld.vue pour la démonstration suivante :

<template>
  <div class="hello">
    <button @click="fetchData">点击获取数据</button>
    <ul v-for="item in itemList" :key="item.id">
      <li>{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import request from '@/request';

export default {
  name: 'HelloWorld',
  data() {
    return {
      itemList: []
    }
  },
  methods: {
    fetchData() {
      request.get('https://jsonplaceholder.typicode.com/posts')
        .then(res => {
          this.itemList = res;
        })
        .catch(e => {
          console.error(e);
        });
    }
  }
}
</script>

Dans ce composant, nous utilisons import request from '@/request'; pour importer la fonction de requête d'interface. import request from '@/request';来导入接口请求函数。

fetchData

fetchData est une méthode d'instance utilisée pour obtenir les données d'interface lorsque le composant est chargé. Lorsque vous cliquez sur le bouton, une requête GET est lancée en appelant la méthode request.get et les données renvoyées sont affectées au tableau itemList.

Maintenant, démarrez le serveur de développement et accédez au composant via http://localhost:8080/. Cliquez sur le bouton sur la page et nous pouvons voir que les données renvoyées par l'interface sont restituées avec succès sur la page.

4. Conclusion

Encapsuler la fonction de requête d'interface dans Vue peut rendre le code plus standardisé et plus facile à maintenir. Cet article montre comment créer un module nommé request.js, qui encapsule toutes les fonctions de requête d'interface et implémente un exemple d'utilisation de cette fonction dans un composant Vue.

La fonction encapsulée n'est pas compliquée et peut être modifiée et étendue en fonction des besoins spécifiques du projet. Nous recommandons d'utiliser ce module dans les grands projets pour gérer uniformément les fonctions de demande d'interface afin de réaliser la réutilisation et la standardisation du code. 🎜

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!