vue3中axios配置

Vue3中，axios是一个常用的HTTP请求库，可以在组件内部方便地发送异步数据请求。为了统一配置全局的axios实例，通常会在Vue的`setup()`函数或main.js文件中设置。以下是配置的基本步骤：

1. 安装axios：首先需要安装axios，可以使用npm或yarn：

   npm install axios
   # 或者
   yarn add axios

2. 创建axios实例并配置默认选项：在`setup()`函数或Vue原型上创建一个axios实例，并设置一些全局的配置，例如基础URL、超时时间等。

   import { createApp } from 'vue';
   import axios from 'axios';

   const app = createApp(App);

   // 在原型上创建axios实例
   app.config.globalProperties.$http = axios.create({
     baseURL: process.env.BASE_API_URL, // 基础API URL
     timeout: 5000, // 超时时间（单位：毫秒）
     headers: {
       'Content-Type': 'application/json',
       Authorization: 'Bearer ' + localStorage.getItem('token') // 如果有认证信息
     }
   });

   // 如果需要取消所有请求
   app.config.globalProperties.$http.cancelAll = axios.CancelToken.source();

   app.mount('#app');

3. 使用：现在可以在组件内的任何地方通过`$http`属性来发起请求了，例如获取数据：

   export default {
     async mounted() {
       try {
         const response = await this.$http.get('/api/users');
         console.log(response.data);
       } catch (error) {
         if (error instanceof axios.CancelledError) {
           console.log('请求已取消');
         } else {
           console.error(error.response.data);
         }
       }
     }
   };