Appelez l'API REST à partir d'un fichier JavaScript à l'aide de Vue
P粉170858678
P粉170858678 2023-08-29 19:23:56
0
1
547
<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>
P粉170858678
P粉170858678

répondre à tous(1)
P粉464208937

Habituellement, vous déplacez simplement la partie Axios dans un module et laissez l'utilisation des données à vos composants.

// services/rest.js
import axios from "axios";

const rest = axios.create({
  // 更好的方式是使用环境变量来定义你的URL
  baseURL: "http://localhost:8080/rest/tctresidents/v1",
});

// 这是一个函数
export const getResidents = async () => {
  try {
    // 请求路径将会附加到baseURL后面
    return (await rest.get("/Residents")).data;
  } catch (err) {
    // 参考 https://axios-http.com/docs/handling_errors
    console.error(err.toJSON());

    throw new Error(err.message);
  }
};

Puis dans votre composant/stockage/quoi que ce soit...

import { getResidents } from "./path/to/services/rest";

export default {
  data: () => ({ residents: [], errors: [] }),
  async created() {
    try {
      this.residents = await getResidents();
    } catch (err) {
      this.errors.push(err);
    }
  },
};
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal