<p>我有一个在Vue页面上完美运行的Axios API调用。我需要将其变成一个独立的可调用模块，以便在应用程序中多次重复使用。每次尝试都失败了，我不确定是缺乏对独立js的经验还是其他原因。</p> <p>这是可工作的Vue代码。</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: [] } }, // 在组件创建时获取帖子。 created() { axios.get("http://localhost:8080/rest/...") .then(response => { // JSON响应会自动解析。 this.posts = response.data }) .catch(e => { this.errors.push(e) }) } } </script> </code></pre> <p>Vue 3。谢谢你的回答。抱歉我没有表达清楚。我的目标是创建一个模块（类似于rest.js），然后在Pinia中使用它。目的是加载一次，然后经常使用结果。目前，它可以通过类似以下代码的“静态”加载工作，其中getJSONList调用返回一个JSON格式的答案，并将该答案放入MyList中以供整个应用程序使用。因此，组件只需使用Pinia映射。</p> <pre class="brush:php;toolbar:false;">actions: { async fetchList() { const data = await getJSONList(); this.Mylist = data; },</pre> <p>很多次迭代。虽然这不返回任何内容，但至少不会抛出任何错误...</p> <pre class="brush:php;toolbar:false;">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); }</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);
    }
  },
};