使用ts封装一个Axios请求

在TypeScript中封装Axios请求，你可以创建一个封装了Axios实例的模块，并在其中定义一个用于发送请求的函数。以下是一个简单的例子：

首先，安装Axios：

npm install axios

然后，创建一个http.ts文件，并添加以下代码：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
const httpClient = axios.create({
  baseURL: 'https://api.example.com', // 基础URL
  timeout: 10000, // 请求超时时间
  // 其他配置...
});
 
export const request = <T = any, R = AxiosResponse<T>>(config: AxiosRequestConfig): Promise<R> => {
  return httpClient(config).then((response) => {
    return response;
  }).catch((error) => {
    // 处理请求错误
    console.error(error);
    return Promise.reject(error);
  });
};

现在，你可以在其他文件中使用request函数来发送请求：

import { request } from './http';
 
interface User {
  id: number;
  name: string;
}
 
// GET请求示例
request<User>({
  method: 'GET',
  url: '/users/1',
});
 
// POST请求示例
request<User, any>({
  method: 'POST',
  url: '/users',
  data: {
    name: 'New User',
  },
});

这个封装的request函数接受一个Axios配置对象，并返回一个Promise，它将在请求成功时解析为Axios响应对象，在请求失败时被拒绝。你可以根据需要对其进行进一步的自定义，比如添加请求拦截器和响应拦截器。