Vue3 Axios API 调用：详细教程和最佳实践

Vue3 调用后台接口可以通过 Axios 库实现，具体步骤如下：

安装 Axios 库

在终端中输入以下命令安装 Axios 库：

npm install axios

在 Vue3 组件中使用 Axios

在 Vue3 组件中，可以使用以下代码调用后台接口：

import axios from 'axios';

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

在上面的代码中，axios.get('/api/items') 表示向后台发送一个 GET 请求，请求的 URL 是 /api/items，请求成功后将响应数据保存在组件的 items 属性中。

配置 Axios 全局设置

如果需要在多个组件中使用 Axios，可以将 Axios 的全局设置在 Vue3 的入口文件中进行配置，如下所示：

import { createApp } from 'vue';
import axios from 'axios';
import App from './App.vue';

const app = createApp(App);

axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.timeout = 5000;
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');

app.config.globalProperties.$axios = axios;

app.mount('#app');

在上面的代码中，axios.defaults.baseURL 表示设置 Axios 请求的默认 URL 前缀，axios.defaults.timeout 表示设置 Axios 请求的超时时间，axios.defaults.headers.common 表示设置 Axios 请求的公共请求头，app.config.globalProperties.$axios 表示将 Axios 设置为 Vue3 全局属性，可以在组件中通过 this.$axios 来使用 Axios。