<p>I have an Axios API call that works perfectly on a Vue page. I need to turn this into a standalone callable module that can be reused multiple times in the application. Every attempt fails, I'm not sure if it's a lack of experience with standalone js or something else. </p> <p>This is working Vue code. </p> <pre class="lang-html prettyprint-override"><code><template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.resID}}</strong></p> <p>{{post.Name}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from 'axios'; export default { name: "GetMxList", data() { return { posts: [], errors: [] } }, // Get the post when the component is created. created() { axios.get("http://localhost:8080/rest/...") .then(response => { // JSON responses will be parsed automatically. this.posts = response.data }) .catch(e => { this.errors.push(e) }) } } </script> </code></pre> <p>Vue 3. Thank you for your answer. Sorry I didn't express myself clearly. My goal is to create a module (similar to rest.js) and then use it in Pinia. The goal is to load once and then use the results often. Currently it works with "static" loading like the following code, where the getJSONList call returns a JSON formatted answer and puts that answer into a MyList for use throughout the application. Therefore, components simply use Pinia mapping. </p> <pre class="brush:php;toolbar:false;">actions: { async fetchList() { const data = await getJSONList(); this.Mylist = data; },</pre> <p>Many iterations. While this returns nothing, at least it doesn't throw any errors...</p> <pre class="brush:php;toolbar:false;">import axios from 'axios'; export function getJSONList() { const rest = axios.create({ baseURL: "http://localhost:8080/rest/", // A better approach is to use environment variables }); const getPosts = async () => { try { return (await rest.get("http://localhost:8080/rest/")).data; } catch (err) { console.error(err.toJSON()); throw new Error(err.message); } }; return (getPosts); }</pre></p>

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