Vue.js从外部js文件调用异步函数

// api.js
export async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
    throw error;
  }
}

<template>
  <div>
    <h1>Data from API</h1>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else>
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script>
import { fetchData } from './api.js';

export default {
  data() {
    return {
      data: null,
      loading: true,
      error: null,
    };
  },
  async created() {
    try {
      this.data = await fetchData();
    } catch (error) {
      this.error = error.message;
    } finally {
      this.loading = false;
    }
  },
};
</script>

<style scoped>
/* Add your styles here */
</style>