使用ts封装一个Axios请求_代码007(未授权)

下面是一个简单的 Ty peSc rip t 版本的封装 Ax ios 请求的例子，基于 Ax i os 0.21.1 版本：

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

// 定义通用响应结构
export interface ApiResponse&lt;T&gt; {
  code: number;
  data: T;
  message: string;
}

// 创建一个 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
});

// 定义请求拦截器
axiosInstance.interceptors.request.use((config: AxiosRequestConfig) =&gt; {
  // 在发送请求之前做些什么，比如添加 token 头部等
  return config;
}, (error: any) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 定义响应拦截器
axiosInstance.interceptors.response.use((response: AxiosResponse) => {
  // 对响应数据做些什么，比如处理通用响应结构，返回 data 部分
  const apiResponse: ApiResponse<any> = response.data;
  return apiResponse.data;
}, (error: any) => {
  // 对响应错误做些什么
  return Promise.reject(error);
});

// 封装 GET 请求
export function get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
  return axiosInstance.get<T>(url, { params, ...config });
}

// 封装 POST 请求
export function post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
  return axiosInstance.post<T>(url, data, config);
}

// 封装 PUT 请求
export function put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
  return axiosInstance.put<T>(url, data, config);
}

// 封装 DELETE 请求
export function del<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
  return axiosInstance.delete<T>(url, config);
}

在这个示例中，我们首先定义了一个通用的响应结构 ApiResponse，用来包装 API 返回的数据，包括状态码、数据和消息等信息。然后，我们创建了一个 Axios 实例，定义了请求和响应拦截器，以及封装了 GET、POST、PUT 和 DELETE 请求的函数。每个函数都使用了 Axios 实例发送请求，并处理了响应的通用结构，最后只返回了数据部分。

使用这些封装的函数，可以方便地发送请求，并处理通用响应结构。比如，我们可以这样使用

import { get, post } from './api';

// 发送 GET 请求
get<User[]>('/users').then(users => {
  console.log(users);
});

// 发送 POST 请求
post<User>('/users', { name: 'Alice', age: 18 }).then(user => {
  console.log(user);
});

其中，我们可以在函数中指定返回的数据类型，例如 <User[]> 表示返回一个 User 类型的数组，或者表示返回一个 User 类型的对象。

在网络请求中，经常会遇到请求超时的情况，为了提高用户体验，我们可以添加请求超时的功能，当请求超过一定时间仍未返回时，自动取消请求并抛出异常。这可以通过设置 timeout 参数来实现，例如：

// 封装 GET 请求，并设置超时时间为 10 秒
export function get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
  return axiosInstance.get<T>(url, { params, ...config, timeout: 10000 });
}

在这个示例中，我们为 GET 请求添加了一个超时时间为 10 秒的选项。当请求超过 10 秒仍未返回时，Axios 会自动取消请求，并抛出一个 Error 异常。我们可以在调用时捕获这个异常，以便进行错误处理。

// 封装 GET 请求，并添加请求重试功能
export function get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
  const defaultConfig = { params, ...config };
  return axiosInstance.get<T>(url, {
    ...defaultConfig,
    retry: 3, // 最多重试 3 次
    retryDelay: 1000, // 每次重试间隔 1 秒
  });
}

import axios, { AxiosRequestConfig, AxiosResponse, CancelToken } from 'axios';

// 创建一个取消令牌
const cancelToken = axios.CancelToken.source();

// 封装 GET 请求，并添加请求取消功能
export function get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
  const defaultConfig = { params, ...config, cancelToken: cancelToken.token };
  return axiosInstance.get<T>(url, defaultConfig);
}

// 取消请求
export function cancelRequest() {
  cancelToken.cancel('请求已取消');
}

import axios, { AxiosRequestConfig } from 'axios';

// 缓存请求结果的 Map 对象
const cacheMap = new Map<string, any>();

// 封装 GET 请求，并添加请求缓存功能
export function get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
  const cacheKey = url + JSON.stringify(params);
  const cacheData = cacheMap.get(cacheKey);
  if (cacheData) {
    return Promise.resolve(cacheData);
  }
  const promise = axiosInstance.get<T>(url, { params, ...config });
  promise.then((res) => cacheMap.set(cacheKey, res.data));
  return promise;
}