Calling REST API from JavaScript file using Vue

Question

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.

This is working Vue code.

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

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.

actions: {

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

Many iterations. While this returns nothing, at least it doesn't throw any errors...

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

Answer 1

Typically, you just move the Axios part into a module and leave the usage of the data to your components.

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

Then in your component/storage/whatever...

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