vue3+ts 创建一个自定义的Axios事例并全局配置

在Vue 3中，你可以通过创建一个自定义的Axios实例并设置全局配置来优化和简化你的HTTP请求。以下是一个使用TypeScript的基本步骤-通义千问回答

1.首先，你需要安装axios库。如果你还没有安装，可以使用npm或yarn进行安装：

bash
npm install axios
# 或者
yarn add axios

2.在你的项目中创建一个新的文件，例如 src/utils/axios.ts，然后在这个文件中设置你的自定义Axios实例。

typescript
// src/utils/axios.ts
import axios, { AxiosInstance } from 'axios';

const instance: AxiosInstance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL as string, // 使用环境变量获取API的基础URL
  timeout: 5000,
});

instance.interceptors.request.use(
  (config) => {
    // 在这里添加任何需要修改的请求配置或者处理逻辑
    return config;
  },
  (error) => {
    console.error('Error in request interceptor:', error);
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  (response) => {
    // 在这里添加任何需要修改的响应数据或者处理逻辑
    return response.data;
  },
  (error) => {
    console.error('Error in response interceptor:', error);
    return Promise.reject(error);
  }
);

export default instance;

3.现在你可以在其他模块中导入并使用这个自定义的Axios实例。例如，在一个组件中：

typescript
// src/components/MyComponent.vue

<template>
  <!-- Your component template -->
</template>

<script lang="ts">
import axiosInstance from '@/utils/axios';

export default {
  name: 'MyComponent',
  async mounted() {
    try {
      const response = await axiosInstance.get('/some-endpoint');
      console.log(response);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  },
};
</script>

4.如果你想将这个自定义的Axios实例作为Vue应用的一个插件，以便在整个应用中全局使用，你可以在main.ts（或相应的入口文件）中注册它：

typescript
// src/main.ts

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

const app = createApp(App);

app.config.globalProperties.$http = axiosInstance;

app.mount('#app');

现在你就可以在任意Vue组件中通过this.$http访问到你的自定义Axios实例了。