使用Vue从JavaScript文件调用REST API

Question

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

这是可工作的Vue代码。

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

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

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