Tutoriel de démarrage VUE3 : Utilisation du plug-in Vue.js pour encapsuler les requêtes d'interface API

Vue.js est actuellement l'un des frameworks front-end les plus populaires. Vue3 est la dernière version de Vue.js, qui offre une syntaxe plus simple et de meilleures performances. Dans le développement de Vue.js, les requêtes de données constituent une partie essentielle et les requêtes d'interface API sont également l'une des tâches courantes des programmeurs. Ce tutoriel présentera en détail comment utiliser le plug-in Vue.js pour encapsuler les requêtes d'interface API.

Qu'est-ce que le plug-in Vue.js ?

Dans Vue.js, un plug-in est un module fonctionnel qui peut fournir des fonctions de niveau global pour les applications Vue.js. Nous pouvons encapsuler des fonctionnalités dans des plugins et injecter des propriétés, des directives, des composants et bien plus encore dans les applications Vue.js. Vue.js fournit officiellement des plug-ins courants que nous pouvons utiliser, tels que Vue Router et Vuex. Bien sûr, nous pouvons également écrire nos propres plug-ins pour réaliser les fonctions dont nous avons besoin.

1. Créer des plug-ins

Nous pouvons créer des plug-ins simples en définissant des fonctions ou des propriétés globales. Mais dans ce tutoriel, nous présenterons comment encapsuler les requêtes d’interface API dans un plug-in. Tout d’abord, nous devons installer axios, qui est une bibliothèque JavaScript populaire pour gérer les requêtes HTTP.

npm install axios --save

Ensuite, nous créons un plugin API comme suit :

import axios from 'axios'#🎜 🎜#

const ApiPlugin = {

install(Vue) {

Vue.prototype.$api = {
  get(url) {
    return axios.get(url)
  },
  post(url, data) {
    return axios.post(url, data)
  }
}

}

}

export default ApiPlugin

# 🎜🎜 #Dans le code ci-dessus, nous définissons un plug-in ApiPlugin, qui contient une méthode install() qui accepte le constructeur Vue comme paramètre. Un attribut $api est défini dans la méthode install(), et un objet contenant deux méthodes (get et post) est attaché à Vue.prototype.

Utiliser des plugins

Maintenant que nous avons créé un plugin API, nous devons l'utiliser dans notre application Vue.js. Nous pouvons utiliser le code suivant pour introduire le plugin dans l'application Vue.js :

import Vue depuis 'vue'

import App depuis './App.vue'

import ApiPlugin de './api-plugin'

Vue.use(ApiPlugin)

new Vue({

render : h => h(App), # 🎜🎜#}).$mount('#app')

Dans le code ci-dessus, nous introduisons d'abord l'ApiPlugin dans l'application via l'instruction d'importation, puis utilisons Vue.use() méthode pour installer le plug-in. Enfin, nous créons une instance Vue et la montons sur l'élément #app. Désormais, nous pouvons utiliser l'attribut $api pour effectuer des requêtes API dans notre application.

Envoyer une requête API

3. Supposons que nous souhaitions envoyer une requête GET et obtenir les données renvoyées. Nous pouvons utiliser la méthode $api.get() dans le composant Vue pour y parvenir : /div> ;

<script></p>export default {<p> nom : 'App',<br> data() {# 🎜🎜 #<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;h1&gt;{{ message }}&lt;/h1&gt;</pre><div class="contentsignin">Copier après la connexion</div></div></p>},<p> async Mounted() {<br><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { message: '', }</pre><div class="contentsignin">Copier après la connexion</div></div></p>}<p>}<br></script>
#🎜🎜 #at Dans le code ci-dessus, nous utilisons la méthode $api.get() dans la fonction hook montée pour envoyer une requête GET à http://localhost:3000, et une fois la requête terminée, les données renvoyées sont affectées au attribut de message à afficher dans le modèle.

Envoyer une requête POST

L'envoi d'une requête POST est similaire à l'envoi d'une requête GET, il suffit de transmettre les données comme premier des $ Méthode api.post() Passez simplement deux paramètres :

async submit() {

const data = { name : 'John', age: 30 }

const réponse = wait this.$api .post('http://localhost:3000', data)

console.log(response.data)

}
4. Dans le code ci-dessus, nous êtes dans submit() La méthode crée un objet de données contenant deux propriétés, qui est passé comme deuxième paramètre lors de l'appel de la méthode $api.post(). Nous imprimons les données renvoyées sur la console.

Résumé

En étudiant ce tutoriel, vous devriez maintenant comprendre comment utiliser le plug-in Vue.js pour encapsuler les requêtes d'interface API. Dans le développement réel, les requêtes API sont généralement utilisées avec d'autres fonctions, composants, etc. Nous pouvons mieux organiser et réutiliser le code en créant des plug-ins appropriés. J'espère que ce tutoriel pourra vous aider dans votre travail de développement Vue.js.

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!