vue3+ts封装axios包含loading

在Vue 3中使用TypeScript封装axios并包含loading功能的步骤如下：

首先，安装axios和@types/axios依赖：
npm install axios @types/axios
登录后复制

创建一个名为api.ts的文件，用于封装axios请求和loading功能：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
import { reactive } from 'vue';


// 创建一个loading对象，用于控制loading状态
const loading = reactive({
  isLoading: false,
});
// 创建一个axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
});
// 请求拦截器，在发送请求之前执行
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    loading.isLoading = true; // 开启loading状态
    return config;
  },
  (error) => {
    loading.isLoading = false; // 关闭loading状态
    return Promise.reject(error);
  }
);
// 响应拦截器，在接收到响应之后执行
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    loading.isLoading = false; // 关闭loading状态
    return response.data;
  },
  (error) => {
    loading.isLoading = false; // 关闭loading状态
    return Promise.reject(error);
  }
);
// 封装get请求方法
export const get = async (url: string, config?: AxiosRequestConfig): Promise => {
  try {
    const response = await instance.get(url, config);
    return response;
  } catch (error) {
    throw new Error(error);
  }
};
// 封装post请求方法
export const post = async (url: string, data?: any, config?: AxiosRequestConfig): Promise => {
  try {
    const response = await instance.post(url, data, config);
    return response;
  } catch (error) {
    throw new Error(error);
  }
};
export default {
  loading,
};

3. 在Vue组件中使用封装的axios和loading功能：

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

<script>
import { ref } from 'vue';
import api from './api';

export default {
setup() {
const data = ref('');

const fetchData = async () => {
try {
const response = await api.get<string>('/data');
data.value = response;
} catch (error) {
console.error(error);
}
};

return {
fetchData,
data,
...api,
};
},
};
</script>
登录后复制
在上述代码中，我们通过api.ts文件封装了axios的get和post请求方法，并使用reactive创建了一个loading对象来控制loading状态。在Vue组件中，我们可以直接调用api.get或api.post方法来发送请求，并通过api.loading.isLoading来控制loading的显示与隐藏。