Aufrufen der REST-API aus einer JavaScript-Datei mit Vue

Question

Ich habe einen Axios-API-Aufruf, der auf einer Vue-Seite perfekt funktioniert. Ich muss dies in ein eigenständiges aufrufbares Modul umwandeln, das in der Anwendung mehrfach wiederverwendet werden kann. Jeder Versuch schlägt fehl. Ich bin mir nicht sicher, ob es an mangelnder Erfahrung mit Standalone-JS oder etwas anderem liegt.

Dies ist funktionierender Vue-Code.

<code><template>
  <div>
    <ul v-if="posts && posts.length">
      <li v-for="Beiträge der Beiträge">
        <p><strong>{{post.resID}}</strong></p>
        <p>{{post.Name}}</p>
      </li>
    </ul>

    <ul v-if="errors &&errors.length">
      <li v-for="Fehler der Fehler">
        {{Fehlermeldung}}
      </li>
    </ul>
  </div>
</template>

<script>
Axios aus 'Axios' importieren;

Standard exportieren {
  Name: "GetMxList",
  Daten() {
    zurückkehren {
      Beiträge: [],
      Fehler: []
    }
  },

  // Den Beitrag abrufen, wenn die Komponente erstellt wird.
  erstellt() {
    axios.get("http://localhost:8080/rest/...")
    .then(response => {
      // JSON-Antworten werden automatisch analysiert.
      this.posts = Antwort.Daten
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>
</code>

Vue 3. Vielen Dank für Ihre Antwort. Tut mir leid, dass ich mich nicht klar ausgedrückt habe. Mein Ziel ist es, ein Modul (ähnlich rest.js) zu erstellen und es dann in Pinia zu verwenden. Das Ziel besteht darin, einmal zu laden und die Ergebnisse dann häufig zu verwenden. Derzeit funktioniert es mit „statischem“ Laden wie im folgenden Code, wobei der getJSONList-Aufruf eine JSON-formatierte Antwort zurückgibt und diese Antwort zur Verwendung in der gesamten Anwendung in eine MyList einfügt. Daher verwenden Komponenten einfach die Pinia-Zuordnung.

aktionen: {

    asynchrone fetchList() {
      
      const data = Warten auf getJSONList();
      this.Mylist = Daten;
    },

Viele Iterationen. Dies gibt zwar nichts zurück, wirft aber zumindest keine Fehler aus ...

axios aus 'axios' importieren;

Exportfunktion getJSONList() {
    
    const rest = axios.create({
        baseURL: "http://localhost:8080/rest/", // Ein besserer Ansatz ist die Verwendung von Umgebungsvariablen
      });

    const getPosts = async () =>
    versuchen {
      return (await rest.get("http://localhost:8080/rest/")).data;
    } Catch (Err) {
      console.error(err.toJSON());
      throw new Error(err.message);
    }
  };
    return (getPosts);
}

Answer 1

通常，你只需要将Axios部分移入一个模块，并将数据的使用留给你的组件。

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

然后在你的组件/存储/任何地方...

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