vue3下axios

在Vue 3中使用axios可以按照以下步骤进行：

1. 安装axios：在终端中运行以下命令来安装axios依赖：

npm install axios

2. 创建API服务：可以在项目的src文件夹下创建一个api文件夹，在其中创建一个api.js文件，用于封装axios请求和处理返回的数据。在api.js文件中，可以这样写一个基本的GET请求的例子：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com', // 根据实际情况替换为你的API地址
});

export default {
  getData() {
    return apiClient.get('/data');
  },
};

3. 在Vue组件中使用API服务：在需要使用API的Vue组件中，可以通过导入api服务并调用对应的方法来发起请求。例如，可以在一个Home.vue组件中这样使用：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import api from '@/api/api.js';

export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      api.getData()
        .then((response) => {
          this.items = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

这样，在Home.vue组件挂载时会调用fetchData()方法发送GET请求，然后将返回的数据赋值给items数组，并在模板中展示出来。

这只是一个简单的示例，你可以根据实际需求在api.js中定义更多的请求方法，并在组件中使用。同时，你也可以根据需要配置axios的拦截器、设置请求头等。