我有一个在Vue页面上完美运行的Axios API调用。我需要将其变成一个独立的可调用模块，以便在应用程序中多次重复使用。每次尝试都失败了，我不确定是缺乏对独立js的经验还是其他原因。

这是可工作的Vue代码。

<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: []
    }
  },

  // 在组件创建时获取帖子。
  created() {
    axios.get("http://localhost:8080/rest/...")
    .then(response => {
      // JSON响应会自动解析。
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Vue 3。谢谢你的回答。抱歉我没有表达清楚。我的目标是创建一个模块（类似于rest.js），然后在Pinia中使用它。目的是加载一次，然后经常使用结果。目前，它可以通过类似以下代码的“静态”加载工作，其中getJSONList调用返回一个JSON格式的答案，并将该答案放入MyList中以供整个应用程序使用。因此，组件只需使用Pinia映射。

actions: {

    async fetchList() {
      
      const data = await getJSONList();
      this.Mylist = data;
    },

很多次迭代。虽然这不返回任何内容，但至少不会抛出任何错误...

import axios from 'axios';

export function getJSONList() {
    
    const rest = axios.create({
        baseURL: "http://localhost:8080/rest/", // 更好的做法是使用环境变量
      });

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