如何在一个地方获得所有 api 响应 (33) 而不会弄得一团糟答案

【问题标题】：How to get all api response (33) in one place without making a mess如何在一个地方获得所有 api 响应 (33) 而不会弄得一团糟
【发布时间】：2020-01-07 06:09:59
【问题描述】：

帮我处理可怕的结构化 api

如果我使用参数对 api 进行 1 次调用，以下是响应：region: 'eu', period: 'may'

  {
    users: {
      'idHERE1': {
        server: 'EU',
        period: 'may',
        data1: 1111,
        data2: 4535
      },
      'idHERE2': {
        server: 'EU',
        period: 'may',
        data1: 5235,
        data2: 5325
      }
    }
  }

最后我想要这样的东西：

  [
    {
      id: 'idHERE1',
      may: {
        servers: {
          eu: {
            data1: 1111,
            data2: 4535
          },
          na: {
            data1: 7236
            data2: 24
          }
        }
      },
      june: {
        servers: {
          eu: {
            data1: 5235,
            data2: 14
          },
          na: {
            data1: 667
            data2: 124
          }
        }
      },
      july: {
        servers: {
          eu: {
            data1: 62,
            data2: 6145
          },
          na: {
            data1: 725
            data2: 12174
          }
        }
      }
    }
    // same for "idHERE2"
  ]
  // etc

为此，我需要向 api 发出 33 个请求

有 3 个区域：'eu'、'na'、'asia'

周期 = 月，所以现在有 11 个，但每个月都在增长

而且我不知道如何对其进行编码，以免造成大混乱。

到目前为止我试过了：

  const servers = ['eu', 'na', 'asia'];
  const promise = servers.map(s =>
    fetch(`apiURL.com/opts?server=${s}`)
      .then(r => r.json())
  );

  Promise.all(promise)
    .then(res => {
      // do stuff
    });

它起作用了，我得到了我想要的，剩下的就是用reduce 等对其进行格式化，但后来我决定用periods 将承诺放在另一个地图中

  const promise = periods.map(p =>
    servers.map(s =>
      fetch(`apiURL.com/opts?server=${s}?period=p`)
        .then(r => r.json())
    )
  )

我明白了：

[
  [
    Promise [Object] {
      _bitField: 0,
      _fulfillmentHandler0: undefined,
      _rejectionHandler0: undefined,
      _promise0: undefined,
      _receiver0: undefined
    },
    Promise [Object] {
      _bitField: 0,
      _fulfillmentHandler0: undefined,
      _rejectionHandler0: undefined,
      _promise0: undefined,
      _receiver0: undefined
    },
    Promise [Object] {
      _bitField: 0,
      _fulfillmentHandler0: undefined,
      _rejectionHandler0: undefined,
      _promise0: undefined,
      _receiver0: undefined
    }
  ],
  [
    Promise [Object] {
      _bitField: 0,
      _fulfillmentHandler0: undefined,
      _rejectionHandler0: undefined,
      _promise0: undefined,
      _receiver0: undefined
    },
    Promise [Object] {
      _bitField: 0,
      _fulfillmentHandler0: undefined,
      _rejectionHandler0: undefined,
      _promise0: undefined,
      _receiver0: undefined
    },
    Promise [Object] {
      _bitField: 0,
      _fulfillmentHandler0: undefined,
      _rejectionHandler0: undefined,
      _promise0: undefined,
      _receiver0: undefined
    }
  ]
]

所以我不确定 Promises 是否可行或有更好的方法。

【问题讨论】：

标签： javascript node.js api fetch

【解决方案1】：

你只需要等待从循环返回的承诺

const promise = periods.map(p =>
    Promise.all(servers.map(s =>
        fetch(`apiURL.com/opts?server=${s}?period=p`)
            .then(r => r.json())
    ))
)

return Promise.all(promise);

您可以实现 async-await，这将使您的代码更具可读性和更好的错误处理能力，但这也包括使用 Promise，因此您可以使用已实现的代码。

此外，如果您想同时使用所有 API，您可以展平数组，然后使用 Promise.all

const promise = [].concat(...periods.map(p =>
    servers.map(s =>
        fetch(`apiURL.com/opts?server=${s}?period=p`)
            .then(r => r.json())
    )
))

return Promise.all(promise);

【讨论】：