vue异步请求

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

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

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="loading">加载中...</div>
    <div v-if="error">{{ error }}</div>
    <ul v-if="data">
      <li v-for="item in data" :key="item.id">{{ item.name }}</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/users');
        this.data = response.data;
      } catch (err) {
        this.error = '请求失败，请稍后再试';
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
/* 添加一些样式 */
</style>

解释说明：

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

   • 包含一个按钮，点击后触发 fetchData 方法。
   • 根据 loading、error 和 data 的状态显示不同的内容。当 loading 为 true 时显示“加载中...”，当 error 存在时显示错误信息，当 data 存在时显示数据列表。

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

   • 导入 axios 库用于发起 HTTP 请求。
   • 定义 data 函数返回组件的状态：data（存储从服务器获取的数据）、loading（加载状态）和 error（错误信息）。
   • 定义 fetchData 方法，使用 async/await 发起异步请求。请求成功后将响应数据赋值给 data，请求失败时设置 error，并在最后将 loading 置为 false。

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

   • 可以根据需要添加样式，这里没有具体的样式代码。

这个示例展示了如何在 Vue 中使用 Axios 进行异步请求，并处理加载状态和错误情况。