vue3 fetch

// 使用 Vue 3 和 Fetch API 获取数据的示例

<template>
  <div>
    <h1>Vue 3 Fetch 示例</h1>
    <ul v-if="data">
      <li v-for="(item, index) in data" :key="index">{{ item }}</li>
    </ul>
    <p v-else>Loading...</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);

    // 在组件挂载时调用 fetch 数据
    onMounted(async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        data.value = result;
      } catch (error) {
        console.error('There was a problem with the fetch operation:', error);
      }
    });

    return {
      data,
    };
  },
};
</script>

<style scoped>
/* 添加一些样式 */
ul {
  list-style-type: none;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用 v-if 指令来判断是否已经获取到数据。如果 data 存在，则显示数据列表；否则显示 "Loading..."。
   • 使用 v-for 指令遍历 data 数组并渲染每个项目。

2. 脚本部分 (<script>):

   • 导入 Vue 3 的组合式 API 函数 ref 和 onMounted。
   • 定义一个响应式变量 data，用于存储从服务器获取的数据。
   • 使用 onMounted 钩子函数，在组件挂载后发起 fetch 请求。
   • fetch 请求返回一个 Promise，使用 await 等待其解析为响应对象。
   • 检查响应状态是否成功（response.ok），如果不成功则抛出错误。
   • 将响应体解析为 JSON 格式，并将结果赋值给 data。
   • 捕获并处理可能发生的错误，例如网络请求失败。

3. 样式部分 (<style scoped>):

   • 添加了一些简单的样式，确保列表项没有默认的样式。

这个示例展示了如何在 Vue 3 中使用 fetch API 来获取数据并在模板中展示。