使用带有批处理的 Trello REST API 获取卡片封面图像答案

【问题标题】：Getting card cover image with the Trello REST API with batching使用带有批处理的 Trello REST API 获取卡片封面图像
【发布时间】：2020-07-06 02:20:52
【问题描述】：

我正在尝试从板上获取所有卡片的封面图片链接，但 boards endpoint 仅提供封面图片的附件 ID。这可能很好，但我也看不到如何使用该 ID 来获取完整的图像链接。这是我的要求：

${TRELLO_API_ROOT}/boards/${boardId}?key=${TRELLO_KEY}&token=${TRELLO_TOKEN}&cards=all&card_customFieldItems=true&attachments=true&attachment_fields=all

这会返回所有卡片和每张卡片的封面图像详细信息，但这些信息似乎对获取完整图像路径没有用处：

cards: [{
  cover: {
    brightness: "light",
    color: null,
    idAttachment: "5eee7680d7b0295f6c52fc22",
    idUploadedBackground: null,
    size: "normal
  }
}]

我考虑过我可能需要使用batch process 为每张卡向cards endpoint 提出请求，但该过程仅限于 10 个请求。一块板很容易有超过 10 张卡片，所以这似乎不是一个好的解决方案。

您是否需要向每张卡片发送请求才能获取封面图片？

编辑：我认为这样做的唯一方法是针对attachments endpoint 对每张卡提出单独的请求。不过，这可能会产生很多的请求：

const requests = data.cards.filter((item) => {
  return item.cover.idAttachment;
}).map((card) => {
  return fetch(`${TRELLO_API_ROOT}/cards/${card.id}/attachments/${card.cover.idAttachment}?key=${TRELLO_KEY}&token=${TRELLO_TOKEN}`)
})

Promise.all(requests)
  .then(responses => {
    return responses;
  })
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(attachments => {
    return attachments;
  });

【问题讨论】：

标签： api rest trello

【解决方案1】：

回答我自己的问题，因为我认为除了为每张卡发送单独的请求之外，没有其他解决方案。但是我们至少可以通过使用batch来改进它。

还有一个澄清；如果卡片已被分配上传的图片作为封面，您只需请求封面图片附件 url。如果卡片封面是 Trello 现在提供的可用 Unplashed 图像之一，您将在常规 boards 端点请求中以 sharedSourceUrl 的形式获得该图像 url，如下所示：

{
  brightness: "light",
  color: null,
  edgeColor: "#776e5d",
  idAttachment: null,
  idUploadedBackground: "5efe2d6c4292a74f4c4051e0",
  scaled: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}],
  sharedSourceUrl: "https://images.unsplash.com/photo-1593435220813-8e60f12e947a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjcwNjZ9&w=2560&h=2048&q=90",
  size: "normal"
}

我不知道他们不会自动为上传的图片网址做同样的事情，但如果是上传的话，似乎没有任何其他方式来获取卡片图片。

因此，使用batch process，您需要确保一次只发送 10 个网址。这很简单，使用标准循环来构建数组。然后我们可以将批处理请求排队到Promise.all 中，并通过将该封面 url 分配给相应的卡来处理响应。我们可以通过这种方式显着减少请求，但在第一个板获取期间提供封面 url 仍然很好。

fetch(`${TRELLO_API_ROOT}/boards/${boardId}?cards=visible&card_customFieldItems=true&key=${TRELLO_KEY}&token=${TRELLO_TOKEN}&attachments=true&attachment_fields=all`)
  .then(response => response.json())
  .then((data) => {
    const cardsWithCovers = data.cards.filter((item, i) => {
      return item.cover.idAttachment;
    });

    // Creating our batched request array for fetching cover urls.
    const batchedUrls = [];
    let batch = [];

    // Creating batches.
    for (let i = 0; i < cardsWithCovers.length; i++) {
      // Important here not to append the url root, api key, or token values. That's how the batch endpoint wants it.
      const url = `/cards/${cardsWithCovers[i].id}/attachments/${cardsWithCovers[i].cover.idAttachment}`;
      batch.push(url);
      // If we have our max 10 request urls, or it's the last item, push the request url group and reset batch array.
      if (batch.length === 10 || i === cardsWithCovers.length - 1) {
        batchedUrls.push(batch);
        batch = [];
      }
    }

    const requests = batchedUrls.map((urls) => {
      return fetch(`${TRELLO_API_ROOT}/batch?key=${TRELLO_KEY}&token=${TRELLO_TOKEN}&urls=${urls}`)
    });


    Promise.all(requests)
      .then(responses => Promise.all(responses.map(res => res.json())))
      .then(batchedData => {
      // Combine the batched array responses into a single array.
      const mergedCardsWithCovers = [].concat.apply([], batchedData);
      data.cards.forEach((card) => {
        // Finding the card cover image url and adding it to the card.
        const cover = mergedCardsWithCovers.find((cardWithCover) => {
          return card.cover.idAttachment === cardWithCover[200].id;
        });
        if (cover) card.cover.url = cover[200].url;
      });
    })
  })

【讨论】：