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

在Vue.js项目中，有时你可能需要从外部JavaScript文件中调用异步函数。以下是一个详细的示例，展示如何在Vue.js中实现这一点。

1. 创建外部JavaScript文件

首先，创建一个外部JavaScript文件，并定义一个异步函数。例如，创建一个名为 api.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;
  }
}

2. 在Vue组件中导入并调用异步函数

接下来，在你的Vue组件中导入这个外部JavaScript文件，并调用异步函数。例如，在 MyComponent.vue 中：

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

3. 解释

外部JavaScript文件 (api.js)：
- 定义了一个名为 fetchData 的异步函数，该函数使用 fetch API 从远程服务器获取数据。
- 使用 export 关键字导出 fetchData 函数，以便在其他文件中导入和使用。
Vue组件 (MyComponent.vue)：
- 使用 import 关键字导入 fetchData 函数。
- 在 created 生命周期钩子中调用 fetchData 函数，并处理返回的数据。
- 使用 data 对象来管理组件的状态，包括 data、loading 和 error。