vue3 ts请求封装

Vue3中使用TypeScript进行HTTP请求封装，通常会利用现有的库如axios、vue-resource或者Vuex-Action-Creator等工具，并结合TypeScript的强类型系统。以下是一个简单的例子：

import axios from 'axios';
import { AxiosInstance } from 'axios';

// 创建一个axios实例并设置默认配置
const service: AxiosInstance = axios.create({
  baseURL: process.env.BASE_API, // API的base_url
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${localStorage.getItem('token')}`,
  },
});

// 使用axios实例发送GET请求
export const getSomeData = async (url: string) => {
  try {
    const response = await service.get(url);
    return response.data;
  } catch (error) {
    console.error(error);
    throw error;
  }
};

// 示例：在Vuex actions中使用封装的getSomeData
import { commit } from '@/store';
import { getSomeData } from './http';

export const fetchData = ({ commit }, payload) => {
  getSomeData(payload.url)
    .then(data => commit('FETCH_DATA_SUCCESS', data))
    .catch(error => commit('FETCH_DATA_FAILURE', error));
};

在这个例子中，我们创建了一个axios实例，然后定义了一些异步操作，比如`getSomeData`，它们接受URL作为参数并返回Promise。在 Vuex 的 actions 中，我们可以直接使用这些封装好的方法。