vue 异步请求

// 使用 Vue 和 Axios 进行异步请求的示例

// 首先确保你已经安装了 axios，可以通过 npm 或 yarn 安装：
// npm install axios
// 或者
// yarn add axios

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <p v-if="loading">加载中...</p>
    <p v-if="error">{{ error }}</p>
    <ul v-if="data">
      <li v-for="(item, index) in data" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null,
      loading: false,
      error: null,
    };
  },
  methods: {
    async fetchData() {
      this.loading = true;
      this.error = null;

      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        this.data = response.data.map(item => item.title);
      } catch (err) {
        this.error = '请求失败，请稍后再试';
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

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

   • 包含一个按钮，点击时会触发 fetchData 方法。
   • 使用 v-if 指令根据 loading、error 和 data 的状态来显示不同的内容。
   • 如果 data 存在，则遍历并显示每一项。

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

   • 引入了 axios 库用于发送 HTTP 请求。
   • 在 data 函数中定义了三个变量：data（存储请求到的数据）、loading（表示是否正在加载）和 error（存储错误信息）。
   • fetchData 方法是一个异步函数，使用 await 等待 axios.get 请求完成。请求成功后将响应数据映射为标题列表，并赋值给 data；如果请求失败则捕获错误并设置 error；最后无论成功与否都会将 loading 设置为 false。

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

   • 可以根据需要添加样式，这里只是占位符。