vue3项目中如何使用ts来封装axios请求并且设置超时时间为3000并且请求时带加载效果 详细代码展示

下面是一个使用 TypeScript 封装 axios 请求并设置超时时间和加载效果的示例代码：

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

// 自定义 axios 实例，可设置全局配置、拦截器等
const instance = axios.create({
  timeout: 3000,
});

// 请求拦截器
instance.interceptors.request.use((config: AxiosRequestConfig) => {
  // 加载效果
  // TODO: 添加加载效果代码
  return config;
});

// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 关闭加载效果
    // TODO: 关闭加载效果代码
    return response;
  },
  (error) => {
    // 关闭加载效果
    // TODO: 关闭加载效果代码
    Promise.reject(error);
  }
);

/**
 * 封装 axios 请求
 *
 * @param {AxiosRequestConfig} config 请求配置对象
 * @returns {Promise<AxiosResponse>} Promise 对象
 */
function request<T = any>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
  return instance.request<T>(config);
}

export default request;

使用该封装好的 axios 实例，可以方便地在 Vue3 项目中发起请求，并且带有加载效果和超时时间的限制。例如：

import request from '@/utils/request';

// 定义接口返回数据类型
interface User {
  id: number;
  name: string;
  age: number;
}

// 调用接口
request<User>({
  url: '/api/user',
  method: 'get',
}).then((response) => {
  console.log('获取用户信息成功：', response.data);
}).catch((error) => {
  console.error('获取用户信息失败：', error);
});