前端一个页面依赖多个接口解决之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);});

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

asyncfunctionfetchAllApis(){const response1 =awaitfetch(api1);const data1 =await response1.json();const response2 =awaitfetch(api2 + data1.key);const data2 =await response2.json();const response3 =awaitfetch(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，即可得到所有需要的数据。

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