博客 | 使用Axios客户端简化API - PROTOTYP

继续阅读，了解我们如何通过一个创新的解决方案，简化复杂的API调用问题。

在一个项目中，我们发现API请求的一致性和可维护性。

最终，我们开发了一种可复用的解决方案，适用于任何框架的项目，能够显著简化API调用。接下来，我们将详细介绍这个基于Axios的封装器及其实际应用。

使用Axios的基础方法

在React应用中使用Axios非常简单。只需导入Axios即可开始使用，例如以下代码：

import React, { useState, useEffect } from "react";
import axios from "axios";

const RandomUser: React.FC = () => {
  const [user, setUser] = useState(null);  async function getRandomUser() {
    try {
      const { data } = await axios.get("/api/users/random_user");
      setUser(data);
    } catch (err) {
      console.error("Error:", err);
    }
  }  useEffect(() => {
    getRandomUser();
  }, []);  if (!user || !user.name) return null;  return 
{user.name}
;
};

从这个简单的例子可以看出，Axios的基础用法非常直观。然而，在实际项目中，API调用可能会变得更加复杂。

配置复杂性的挑战

尽管Axios本身易于使用，但在大型项目中，配置和保持一致性可能成为一大挑战。例如，每个页面可能需要多个API调用，而每次调用都需要配置不同的参数、拦截器和错误处理逻辑。以下是一个更复杂的示例：

import React from "react";
import axios from "axios";
import { FormProvider, useForm } from "react-hook-form";

const CreateRandomUserForm: React.FC = () => {
  const form = useForm();  async function createRandomUser(randomUser: User) {
    try {
      await axios.post(
        "/api/users/random_user",
        randomUser,
        {
          baseURL: "https://some-base-url",
          headers: {
            "Content-Type": "application/json",
            Authorization: "some-token",
          },
        }
      );
    } catch (err) {
      console.error("Error:", err);
    }
  }  return (
    
      
        
      
    
  );
};

在这个示例中，我们为Axios添加了额外的配置。可以想象，当项目中存在多个类似的文件时，代码会变得冗长且难以维护。

为了解决这一问题，我们提出了一个解决方案：创建一个共享的Axios实例，并通过封装类来管理配置和拦截器。

基于类的Axios封装器

在我们的项目中，API调用的复杂性促使我们开发了一个基于类的Axios封装器。这个封装器不仅简化了代码，还可以在不同项目中复用，无论使用何种框架。

以下是一个示例代码，展示如何定义和使用这个封装器：

// http.ts
import {
  HttpClient,
  HttpClientConstructor,
  HttpClientAxiosConfig,
} from "axios-http-wrapper";

// 定义HttpClient构造器
const httpClientConstructor: HttpClientConstructor = {
  baseUrl: "http://some.api.url",
};// 定义Axios配置
const config: HttpClientAxiosConfig = {
  headers: {
    Accept: "application/json",
  },
};// 定义扩展类
export class MyHttpClient extends HttpClient {
  constructor(private endpoint?: string) {
    super(
      {
        baseUrl: "http://some.api.url",
        endpoint: this.endpoint,
      },
      config
    );    // 配置Axios拦截器
    this.client.interceptors.response.use(
      (response) => response,
      (error) => Promise.reject(error)
    );
  }
}

通过这种方式，我们可以将API调用的配置集中管理，确保代码的简洁性和一致性。

主要优势

1. 简化代码：通过封装类，减少了重复的配置代码，使代码更易于理解和维护。
2. 提高一致性：在整个项目中标准化API请求流程，降低出错的可能性。
3. 灵活自定义：支持添加Axios拦截器和自定义错误处理逻辑，满足不同场景的需求。

结论

在开发过程中，如果API调用的流程缺乏标准化，代码很容易变得混乱。虽然这对小型项目影响不大，但对于大型项目来说，可能会显著增加开发和维护的复杂性。

我们的Axios封装器通过提供一种简单且可复用的方式来管理API请求，有效解决了这一问题。我们鼓励您在下一个项目中尝试这一解决方案，并欢迎您分享使用体验。

最后，特别感谢我们的CTO Vlatko Vlahek提出这一想法，以及同事Marko Mrkonjić为React环境下的封装器使用提供了宝贵的建议和支持。

原文链接: https://prototyp.digital/blog/easier-api-calls-with-a-wrapper-around-axios