在保持松耦合的同时整合 API 调用的模式？

Question

单页应用通常会在首次加载时进行多次 API 调用。仪表板之类的东西可能：加载用户信息、加载主要内容、加载侧边栏内容等。 让单个组件担心发出这些请求很容易，但会增加加载时间，因为您有 n 个组件发出 n 个请求。

一种方法是在单个 API 端点下整合任何一个页面进行的所有调用。因此，现在仪表板页面不再对 n 个不同的端点进行 n 次调用，而是对新引入的 /dashboard 端点进行 1 次调用。 该解决方案的代价是服务器端逻辑与客户端逻辑相结合，这似乎是个坏主意。

另一种方法是通过将所有 API 调用整合到单个组件来限制这种与客户端的耦合，然后该组件可以批量处理所有查询，等待响应，将其分解为各个部分，然后将这些结果分发给相应的组件。这种方法似乎比上面的方法更好，尽管仍然存在耦合。

问题：是否有一个完善的模式（或流行的库）来解决这个问题？我想每个大型应用程序都会在某个时候遇到这个问题，但我找不到任何关于该主题的信息。

Answer 1

我不知道您的应用程序有多大，但既然您提到“每个大型应用程序都会在某个时候遇到这个问题”，我认为 GraphQL 是您所需要的。

GraphQL 于 2012 年由 Facebook 内部开发，然后于 2015 年公开发布。它基本上提供了一种开发 Web API 的新方法，并与 REST 和其他 Web 服务架构进行了对比。 GraphQL 支持读取、写入（他们称之为突变）和订阅数据更改 - 实时更新。

关于 Facebook 为何构建 GraphQL 的一些历史记录：2012 年，Facebook 正在开发适用于 Android 和 iOS 的移动应用程序。他们必须对现有的 REST 服务进行更改，以使其适用于他们的移动平台，同时考虑在网络带宽较低的移动设备上获取数据。为了解决这个问题，他们开始研究 GraphQL，这样他们仍然可以在移动平台上使用现有的服务。

使用 GraphQL 有很多优点，但其中之一正是您所需要的：在单个请求中获得多个 API 的响应

如果您使用 React，也可以在前端使用 Relay Facebook 的 React 生产就绪 GraphQL 客户端。还有另一个客户端 GraphQL 框架，称为 Apollo

---

这里只是一个示例如何发送查询以及如何根据请求的查询获得响应

请求：

{
    orders {
        id
        productsList {
            product {
                name
                price
            }
            quantity
        }
        totalAmount
    }
    header {
      id
      isReadOnly
      ... 
    }
    .....
}

回应：

{
    "data": {
        "orders": [
            {
                "id": 1,
                "productsList": [
                    {
                        "product": {
                            "name": "productName",
                            "price": 20.55
                        },
                        "quantity": 100
                    }
                ],
                "totalAmount": 80
            }
        ]
        "header": {
              "id": 1, 
               "isReadOnly": false,
                ...
        }
    }
}