axios封装ts版

Axios是一个流行的JavaScript库，用于在浏览器和Node.js中处理HTTP请求。在TypeScript（TS）中，我们可以对Axios进行封装，以提高代码的类型安全性和可读性。以下是一个简单的Axios封装示例：

首先，确保已经安装了axios和typescript：

npm install axios @types/axios

接下来，创建一个名为`AxiosService.ts`的文件，进行封装：

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

// 创建一个配置的axios实例
const instance: AxiosInstance = axios.create({
  baseURL: process.env.REACT_APP_API_URL || 'https://api.example.com', // API基础URL
  timeout: 10000, // 请求超时时间（毫秒）
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${localStorage.getItem('token')}`, // 如果需要，添加认证信息
  },
});

// 封装发送GET请求
export const get = (url: string, params?: object): Promise<AxiosResponse<any>> => {
  return instance.get(url, { params });
};

// 封装发送POST请求
export const post = (url: string, data: object): Promise<AxiosResponse<any>> => {
  return instance.post(url, data);
};

// 封装其他请求方法，如PUT、DELETE等
// ...

在这个例子中，我们创建了一个全局的axios实例，并添加了一些基本配置。然后，我们为常见的HTTP方法（如GET和POST）定义了封装好的函数，这些函数返回Promise，方便在调用时处理响应。

使用这个封装后的服务，你的代码会自动得到类型提示：

import { get } from './AxiosService';

async function fetchData(): Promise<void> {
  try {
    const response = await get('/users');
    console.log(response.data); // TypeScript会知道response的数据类型
  } catch (error) {
    console.error(error.response.data);
  }
}