高效请求处理神器：Axios 封装秘籍，TypeScript 独家指导

在前端开发中，网络请求是一个常见且重要的任务。Axios 作为一个轻量级、功能强大的网络请求库，广受开发者欢迎。然而，直接使用 Axios 可能会面临类型不明确、错误处理复杂等问题。通过 TypeScript 封装 Axios，可以显著提升代码的可读性、可维护性和稳定性。本文将详细介绍如何利用 TypeScript 封装 Axios，并提供一些实用的技巧和示例。

为什么需要封装 Axios？

封装 Axios 的主要目的是利用 TypeScript 的类型系统，为 Axios 添加类型注解，使代码更加清晰易懂，并能够提前发现类型错误。此外，封装还可以带来以下好处：

1. 清晰的类型定义：通过 TypeScript 定义接口，控制请求和响应的格式。
2. 高效的错误处理：提供详细的错误信息，便于调试和维护。
3. 灵活的拦截器：在请求和响应之前或之后执行特定操作。
4. 便捷的实例化：配置各种选项，简化实例化过程。

动手封装 Axios

创建 Axios 实例

首先，我们需要创建一个 Axios 实例，并为其配置基础 URL 和其他选项。

import axios from "axios";

const instance = axios.create({
  baseURL: "https://api.example.com",
  timeout: 10000,
});

定义请求方法

接下来，我们为 Axios 实例定义常见的 HTTP 方法，如 get 和 post，并为它们添加类型注解。

interface AxiosRequestConfig<T> {
  url?: string;
  method?: Method;
  data?: T;
  params?: any;
  headers?: Record<string, string>;
}

interface AxiosResponse<T> {
  data: T;
  status: number;
  statusText: string;
  headers: Record<string, string>;
  config: AxiosRequestConfig<T>;
}

enum Method {
  GET = "GET",
  POST = "POST",
  PUT = "PUT",
  DELETE = "DELETE",
  // 其他 HTTP 方法...
}

instance.get = function<T>(url: string, config?: AxiosRequestConfig<T>): Promise<AxiosResponse<T>> {
  return instance.request<T>({
    url,
    method: Method.GET,
    ...config,
  });
};

instance.post = function<T>(url: string, data: T, config?: AxiosRequestConfig<T>): Promise<AxiosResponse<T>> {
  return instance.request<T>({
    url,
    method: Method.POST,
    data,
    ...config,
  });
};

处理响应和错误

为了提高代码的可维护性，我们可以统一处理响应和错误。

instance.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      // 服务器响应了一个状态码，不在 2xx 范围内
      console.error("Error Response:", error.response.data);
      return Promise.reject(error.response.data);
    } else if (error.request) {
      // 请求已经发出，但没有收到响应
      console.error("No Response Received:", error.request);
      return Promise.reject(error.request);
    } else {
      // 在设置请求时发生了一些事情，触发了一个错误
      console.error("Error Message:", error.message);
      return Promise.reject(error.message);
    }
  }
);

使用封装后的 Axios

现在，我们可以使用封装后的 Axios 进行网络请求了。

instance.get("/users").then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.error("Error fetching users:", error);
});

总结

通过封装 Axios，我们可以充分利用 TypeScript 的类型化优势，提升代码的可读性、可维护性和可扩展性。这种封装方式使我们能够更轻松、更安全地使用 Axios，从而提升前端开发效率和应用程序质量。在实际项目中，可以根据需求进一步扩展和优化封装，例如添加更多的 HTTP 方法、自定义拦截器等。