使用TypeScript封装Axios以支持接口返回值类型提示和检查

在TypeScript中，我们可以通过定义接口来描述数据的结构，并利用类型系统来对接口返回值进行类型提示和检查。为了实现这一目标，我们可以使用Axios库来发送HTTP请求，并使用TypeScript的装饰器来对返回值进行类型注解。
首先，确保你已经安装了Axios和@types/axios。你可以使用npm或yarn来安装这些依赖：

npm install axios @types/axios

或

yarn add axios @types/axios

接下来，我们可以创建一个Axios封装库，该库将处理请求的发送并返回一个Promise。我们可以通过定义一个泛型接口来描述请求和响应的类型，以便在发送请求时指定期望的返回值类型。

import axios, { AxiosResponse } from 'axios';
interface ApiRequest<T = any> {
url: string;
method?: string;
data?: any;
responseType?: 'json' | 'text';
}
interface ApiResponse<T = any> {
data: T;
status: number;
statusText: string;
headers: { [key: string]: any; };
}
const axiosWrapper = <T = any>(request: ApiRequest<T>): Promise<ApiResponse<T>> => {
return axios(request).then((response: AxiosResponse) => {
const apiResponse: ApiResponse<T> = { ...response.data };
apiResponse.status = response.status;
apiResponse.statusText = response.statusText;
apiResponse.headers = response.headers;
return apiResponse as Promise<ApiResponse<T>>;
});
};

在上面的代码中，我们定义了两个接口：ApiRequest和ApiResponse。ApiRequest用于描述发送请求时需要的数据，包括url、method、data和responseType。ApiResponse用于描述接收到的响应数据，包括data、status、statusText和headers。
然后，我们创建了一个名为axiosWrapper的函数，该函数接收一个ApiRequest对象作为参数，并返回一个Promise。在函数内部，我们使用axios发送请求，并通过.then()方法处理响应。我们将响应数据映射到ApiResponse对象上，并添加了status、statusText和headers属性。最后，我们使用类型断言将ApiResponse对象转换为Promise>类型，以便在调用该函数时能够获得正确的返回值类型。
现在你可以在你的项目中引入axiosWrapper函数，并在发送请求时指定期望的返回值类型。例如：
typescript import axiosWrapper from './axiosWrapper'; const getUserByIdRequest: ApiRequest<User> = { url: '/api/users/:id', method: 'get', responseType: 'json', }; axiosWrapper<User>(getUserByIdRequest).then((response: ApiResponse<User>) => { console.log(response.data); });在上面的代码中，我们首先引入了axiosWrapper函数。然后，我们创建了一个名为getUserByIdRequest的ApiRequest对象，该对象描述了获取用户数据的请求。我们将responseType设置为’json’，并指定了期望的返回值类型为User类型。最后，我们调用axiosWrapper函数并传入getUserByIdRequest对象。在.then()方法中，我们可以通过response.data访问返回的用户数据，并使用User类型的属性进行操作。由于我们在调用axiosWrapper函数时指定了期望的返回值类型为User类型，因此TypeScript将提供类型提示和检查功能。这将大大提高代码的可读性和健壮性。