Appelez l'API REST à partir d'un fichier JavaScript à l'aide de Vue
P粉170858678
2023-08-29 19:23:56
<p>J'ai un appel API Axios qui fonctionne parfaitement sur une page Vue. Je dois transformer cela en un module appelable autonome qui peut être réutilisé plusieurs fois dans l'application. Chaque tentative échoue, je ne sais pas si c'est un manque d'expérience avec js autonome ou autre chose. </p>
<p>Ceci fonctionne avec du code Vue. </p>
<pre class="lang-html Prettyprint-override"><code><template>
<div>
<ul v-if="posts && posts.length">
<li v-for="post des posts">
<p><strong>{{post.resID}}</strong></p>
<p>{{post.Name}}</p>
≪/li>
</ul>
<ul v-if="erreurs && erreurs.length">
<li v-for="erreur d'erreurs">
{{Message d'erreur}}
≪/li>
</ul>
</div>
</modèle>
<script>
importer des axios depuis 'axios' ;
exporter par défaut {
nom : "GetMxList",
données() {
retour {
des postes: [],
les erreurs: []
}
},
// Récupère la publication lorsque le composant est créé.
créé() {
axios.get("http://localhost:8080/rest/...")
.then(réponse => {
// Les réponses JSON seront analysées automatiquement.
this.posts = réponse.data
})
.catch(e => {
ceci.erreurs.push(e)
})
}
}
</script>
</code></pre>
<p>Vue 3. Merci pour votre réponse. Désolé, je ne me suis pas exprimé clairement. Mon objectif est de créer un module (similaire à rest.js) puis de l'utiliser dans Pinia. Le but est de charger une fois puis d'utiliser les résultats souvent. Actuellement, il fonctionne avec un chargement "statique" comme le code suivant, où l'appel getJSONList renvoie une réponse au format JSON et place cette réponse dans une MyList pour une utilisation dans toute l'application. Par conséquent, les composants utilisent simplement le mappage Pinia. </p>
<pre class="brush:php;toolbar:false;">actions : {
async fetchList() {
const data = attendre getJSONList();
this.Mylist = données ;
},</pré>
<p>De nombreuses itérations. Bien que cela ne renvoie rien, au moins cela ne génère aucune erreur...</p>
<pre class="brush:php;toolbar:false;">importer des axios depuis 'axios' ;
fonction d'exportation getJSONList() {
const reste = axios.create({
baseURL : "http://localhost:8080/rest/", // Une meilleure approche consiste à utiliser des variables d'environnement
});
const getPosts = async () =>
essayer {
return (attendre rest.get("http://localhost:8080/rest/")).data;
} attraper (erreur) {
console.error(err.toJSON());
lancer une nouvelle erreur (err.message);
}
} ;
retourner (getPosts);
}</pre></p>
Habituellement, vous déplacez simplement la partie Axios dans un module et laissez l'utilisation des données à vos composants.
Puis dans votre composant/stockage/quoi que ce soit...