前端一个页面依赖多个接口解决之node接口聚合

首先先介绍一下页面的接口请求处理：

接口请求之间是否存在依赖性，主要有两种处理方式：

1. 并行请求： 当这些接口彼此之间互不依赖时，可以同时发起多个请求。这时可以使用 Promise.all([…]) 来处理，这样可以提高页面加载的速度。以下是代码示例：

  Promise.all([ fetch(api1), fetch(api2), fetch(api3) ])      .then(function (responses) {        return Promise.all(responses.map(function (response) {          return response.json();        }));      }).then(function (data) {        console.log(data[0]);  // api1的返回数据        console.log(data[1]);  // api2的返回数据        console.log(data[2]);  // api3的返回数据      }).catch(function (error) {        console.log(error);      }); 

2. 串行请求： 如果这些接口之间存在依赖关系，如接口 B 需要接口 A 的返回数据来发送请求，那这时就需要按一定顺序依次发起这些请求，可以使用 async/await 来确保接口请求的顺序。以下是代码示例：

  async function fetchAllApis() {      const response1 = await fetch(api1);      const data1 = await response1.json();         const response2 = await fetch(api2 + data1.key);      const data2 = await response2.json();         const response3 = await fetch(api3 + data2.key);      const data3 = await response3.json();         console.log(data1, data2, data3);    }       fetchAllApis().catch(e => console.error(e)); 

无论采取哪种方式，都需要进行错误处理，即便某一个或某些接口请求失败，也要使网页尽可能地正常工作。

在 Node.js 中，解决前端页面依赖多个接口的问题，有一种非常有效的解决方案——接口聚合，也就是我们经常说的 BFF（Backend For Frontend）架构。

在 BFF 架构中，我们可以在 Node.js 中创建一个专门为前端提供服务的层，将多个后端接口聚合成一个接口。这样，前端只需要发送一次请求，就能获取所有需要的数据，既减少了网络延迟，也降低了前端代码的复杂度。

实现 BFF 接口聚合的方式主要有两种：

1. 在 BFF 层进行数据聚合： 通过 Node.js 的异步操作（如 Promise 或 async/await）调用多个后端接口，然后将这些接口的数据进行组合或转换，最后将处理后的数据返回给前端。

2. 在后端进行响应聚合： 这种方式是在服务端通过 API 网关或代理的方式来实现数据聚合，将多个后端接口的响应进行集中处理，然后返回给前端。这样 BFF 只需发送一次请求，后端服务层会负责处理所有接口的数据聚合。

示例：

const express = require('express'); const axios = require('axios'); const app = express();  app.get('/aggregated-data', async (req, res) => {   try {     const [res1, res2, res3] = await Promise.all([          axios.get(api1),          axios.get(api2),          axios.get(api3)     ]);      res.send({         data1: res1.data,         data2: res2.data,         data3: res3.data,     });   } catch (error) {     console.error(error);     res.status(500).send({ error: 'Error occurred while fetching data' });   } });  app.listen(3000); 

在此代码中，我们创建了一个 Express 服务器，并定义了一个 /aggregated-data 路径的 GET 请求。当接收到此请求时，我们会一次发起三个不同的 API 请求，并使用 Promise.all 等待所有的请求完成。然后，我们将这三个请求的响应数据组合在一起，最后以 JSON 格式发送给前端。

这样，前端只需要发送一个请求至 /aggregated-data，即可得到所有需要的数据。

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！