vue get请求

// 使用 Vue 中的 axios 发起 GET 请求示例

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">
      {{ data }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null, // 用于存储从服务器获取的数据
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data'); // 发起 GET 请求
        this.data = response.data; // 将获取到的数据赋值给组件的 data 属性
      } catch (error) {
        console.error('获取数据失败:', error); // 捕获并处理请求错误
      }
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

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

   • 包含一个按钮，点击按钮时会调用 fetchData 方法。
   • 使用 v-if 指令来判断是否有数据返回，并显示数据。

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

   • 引入了 axios 库，用于发起 HTTP 请求。
   • 在 data 函数中定义了一个 data 变量，用于存储从服务器获取的数据。
   • fetchData 方法使用 axios.get 发起 GET 请求，并将响应数据赋值给 data。如果请求失败，则捕获错误并在控制台输出。

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

   • 样式部分可以根据需要自行添加，这里没有具体的样式规则。

这个示例展示了如何在 Vue 组件中使用 axios 发起 GET 请求并处理响应数据。