使用ts封装一个Axios请求-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用ts封装一个Axios请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

下面是一个简单的 TypeScript 版本的封装 Axios 请求的例子，基于 Axios 0.21.1 版本：

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

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

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

// 定义请求拦截器
axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
  // 在发送请求之前做些什么，比如添加 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 类型的对象。

如何在封装的 Axios 请求中添加一些常用的功能

添加请求超时功能

在网络请求中，经常会遇到请求超时的情况，为了提高用户体验，我们可以添加请求超时的功能，当请求超过一定时间仍未返回时，自动取消请求并抛出异常。这可以通过设置 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 异常。我们可以在调用时捕获这个异常，以便进行错误处理。

添加请求重试功能

有时候，在网络不稳定的情况下，请求可能会失败，为了提高请求的成功率，我们可以添加请求重试的功能，即在请求失败时，自动重试一定次数，直到请求成功或达到最大重试次数为止。这可以通过设置 retry 和 retryDelay 参数来实现，例如：

// 封装 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 秒
  });
}

在这个示例中，我们为 GET 请求添加了一个最多重试 3 次的选项，每次重试间隔 1 秒。当请求失败时，Axios 会自动重试，并在达到最大重试次数后抛出一个 Error 异常。我们可以在调用时捕获这个异常，以便进行错误处理。

添加请求取消功能

有时候，在用户操作过程中，可能需要取消正在进行的请求，例如在切换页面时取消上一次请求。为了实现这个功能，我们可以使用 Axios 的取消令牌 CancelToken 和取消函数 cancel，例如：

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('请求已取消');
}

在上面的示例中，我们首先创建了一个取消令牌 cancelToken，然后将它添加到 GET 请求的配置中。在需要取消请求的时候，我们可以调用 cancelRequest 函数来执行取消操作。这样就可以在需要的时候随时取消正在进行的请求了。

添加请求缓存功能

有时候，一些请求的结果是不会经常发生变化的，例如用户的基本信息，这种情况下，我们可以使用请求缓存的功能，避免重复请求，提高系统的性能。这可以通过缓存请求结果来实现，例如：

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;
}

在这个示例中，我们创建了一个缓存请求结果的 Map 对象 cacheMap，在 GET 请求时，我们先根据请求 URL 和参数生成一个缓存键 cacheKey，然后在缓存对象中查找是否存在对应的缓存数据，如果有则直接返回，否则发送请求，并将请求结果缓存到 cacheMap 对象中。

这样，下次发起相同的请求时，如果缓存中存在对应的数据，就可以直接返回缓存数据，避免了不必要的网络请求，提高了系统的性能。

Axios请求的优化的一些建议

使用拦截器批量处理请求和响应数据。如果我们需要对请求和响应进行一系列的处理，那么每个请求都单独处理会导致代码重复和维护成本增加。可以通过使用拦截器来统一处理，减少代码重复。例如，可以在请求拦截器中添加公共请求头，或者在响应拦截器中统一处理错误信息等。
合并请求，减少网络请求次数。 对于一些需要发送多个请求的场景，可以将多个请求合并成一个请求，减少网络请求次数，提高系统性能。例如，可以使用 axios.all 或者 Promise.all 方法来合并多个请求。
使用 Axios 的并发请求功能。 在需要发送多个请求的时候，可以使用 Axios 的并发请求功能来同时发送多个请求，提高系统性能。例如，可以使用 axios.spread 方法来同时处理多个请求的响应结果。
配置全局默认参数，避免重复设置。如果在大部分请求中使用了相同的配置参数，可以将这些参数设置为全局默认参数，避免在每个请求中重复设置。例如，可以通过 axios.defaults 来设置默认的请求超时时间、公共请求头等参数。
使用第三方插件来扩展 Axios 功能。 如果需要使用更多的功能，可以通过使用第三方插件来扩展 Axios 的功能。例如，可以使用 axios-mock-adapter 来模拟后端接口，或者使用 axios-retry 来实现请求重试功能。

版权为 OpenAI 的 ChatGPT 模型文章来源地址https://www.toymoban.com/news/detail-591749.html

到了这里，关于使用ts封装一个Axios请求的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！