Appelez l'API REST à partir d'un fichier JavaScript à l'aide de Vue

Question

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.

Ceci fonctionne avec du code Vue.

<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>

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.

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);
}

Answer 1

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);
    }
  },
};