vue3 发送get请求并设置header

在Vue3中发送GET请求并设置HTTP头通常会用到`axios`库，因为Vue官方推荐使用这个库处理网络请求。首先，你需要安装axios：

npm install axios
# 或者
yarn add axios

然后，在你的组件中，你可以创建一个methods对象，定义一个名为`sendGetRequest`的方法，示例如下：

import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const apiUrl = ref('https://api.example.com/data'); // 你的API URL

    // 定义一个配置对象来设置请求头
    const headers = {
      Authorization: 'Bearer your-token', // 替换为你的token或者其他需要的头信息
      'Content-Type': 'application/json',
    };

    // 使用onMounted生命周期钩子在组件挂载后发起请求
    onMounted(() => {
      axios.get(apiUrl.value, { headers })
        .then((response) => {
          console.log(response.data); // 打印响应数据
          // 在这里处理获取的数据
        })
        .catch((error) => {
          console.error('Error fetching data:', error);
        });
    });

    return {
      apiUrl,
    };
  },
};

在这个例子中，每次组件挂载时都会向指定的URL发送GET请求，并附带自定义的headers。如果需要修改请求头，只需更新`headers`变量即可。