vue3 ts axios token 代码 小白

当然可以！Vue 3 是一种流行的 JavaScript 框架，用于构建用户界面。它具有响应式数据绑定、组件化开发和虚拟 DOM 等特性。TypeScript 是一种静态类型检查的 JavaScript 超集，可以增强代码的可读性和可维护性。Axios 是一个基于 Promise 的 HTTP 客户端，用于发送网络请求。

下面是一个使用 Vue 3、TypeScript 和 Axios 的示例代码，用于发送带有 Token 的请求：

首先，你需要安装 Vue 3、TypeScript 和 Axios。可以使用以下命令进行安装：

npm install vue@next
npm install --save-dev typescript
npm install axios

然后，在你的 Vue 3 项目中创建一个组件，例如 `ApiComponent.vue`：

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else>{{ data }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';

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

      axios.get('https://api.example.com/data', {
        headers: {
          Authorization: `Bearer ${this.getToken()}`,
        },
      })
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          this.error = error.message;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getToken() {
      // 在这里返回你的 Token
      return 'your_token';
    },
  },
});
</script>

在上面的代码中，我们创建了一个 `ApiComponent` 组件，其中包含一个按钮和用于显示数据的区域。当点击按钮时，会触发 `fetchData` 方法，该方法使用 Axios 发送带有 Token 的 GET 请求。在请求头中，我们使用 `Authorization` 字段来传递 Token。

请注意，在 `getToken` 方法中，你需要替换 `'your_token'` 为你自己的 Token。

这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。希望对你有所帮助！