帮我用ts写一个完整的axios二次封装,包含上面的需求
时间: 2024-09-18 08:06:51 浏览: 26
在TypeScript中,我们可以创建一个名为`AxiosWrapper`的模块来进行axios的二次封装。下面是一个基本的例子,包含了上述提到的一些关键功能:
```typescript
import axios from 'axios';
import { AxiosRequestConfig, AxiosResponse } from 'axios';
// 创建一个全局的axios实例,并设置默认配置
const instance = axios.create({
baseURL: process.env.REACT_APP_API_BASE_URL, // API基础地址
timeout: 5000, // 超时时间
headers: {
'Content-Type': 'application/json',
},
});
interface IApiResponse<T> {
data: T;
status: number;
error?: string;
}
type RequestMethod = 'get' | 'post' | 'put' | 'delete';
interface AxiosTask {
config: AxiosRequestConfig;
callback: (response: AxiosResponse<any>) => void;
}
class AxiosWrapper {
private tasksQueue: AxiosTask[] = [];
/**
* 发起请求并控制并发
*/
async request(method: RequestMethod, url: string, config?: AxiosRequestConfig) {
if (!config) config = {};
const task: AxiosTask = {
config,
callback: this.handleResponse,
};
this.tasksQueue.push(task);
// 如果队列已满,开始执行第一个请求
if (this.tasksQueue.length === instance.defaults.maxConcurrentRequests) {
await this.executeNext();
}
}
private async executeNext() {
if (this.tasksQueue.length > 0) {
const { config, callback } = this.tasksQueue.shift();
try {
const response = await instance(config);
callback(response.data as any); // 这里假设响应的数据类型为any,实际项目中应根据实际情况指定
} catch (error) {
callback({ error });
}
} else {
// 如果队列为空,则结束循环
return;
}
}
private handleResponse(data: any, res: AxiosResponse<any>) {
if (res.status >= 200 && res.status < 300) {
console.log('Success:', data);
this.onSuccess(data, res);
} else {
console.error('Error:', data, 'Status:', res.status);
this.onError(res);
}
}
// 自定义成功和错误回调,可以根据需求自定义处理策略
private onSuccess(data, response) {
// 这里可以执行请求成功的逻辑,例如缓存、通知等
}
private onError(response) {
// 这里可以执行请求失败的逻辑,如重试、熔断等
}
}
export default new AxiosWrapper();
```
在这个示例中,我们实现了请求的并发控制、请求处理函数以及简单的错误处理。如果你想要添加熔断、重试等功能,可以在`onError`方法内部增加相应的逻辑,比如使用第三方库如`@nestjs/circuitbreaker`或自定义策略。