Question

我的页面上有以下元素：

<div class=playerCard>
   Card Type: <select class="cardType"></select>
   Card Attack: <select class="cardAttack"> </select>
   Card Defense: <select class="cardDefense"></select>
</div>

对于playerCard的三个下拉列表中的每一个，都有一个API调用，它返回该下拉列表元素的内容。每个API调用都返回一个字符串数组。例如，getCardTypes将返回[“Joker”，“Wrath”，“Titan”]

Card Type is an API call that returns a list of valid card types (getCardTypes)
Card Attack is an API call that returns valid attacks based on the type (getAttack(cardType))
Card Defense is an API call that returns valid defenses based on type and attack (getDefense(cardType, attack))

由于我的网页上有超过100+个玩家卡的可能性，我想避免为每张卡进行3次API调用。这看起来很难看！

处理这种困境的最佳做法是什么？到目前为止我所想到的是创建一些全局变量并初始化它们一次（在页面加载时），并编写一些代码来复制getAttack和getDefense API调用背后的功能。但是，几乎互联网上的每一页都说全局变坏了！我还能做什么？

示例工作流程：

用户将新的playerCard添加到页面中。

我们点击getCardTypes API调用，该调用返回一个字符串数组，我们用它来填充卡片类型下拉列表。

用户选择卡片类型。

我们点击了传入卡片类型的getAttack API调用，然后我们收到一个字符串数组（有效攻击），我们用它来填充卡片攻击下拉列表。

用户选择卡片攻击。

我们点击了传入卡片类型和攻击的getDefense API调用，然后我们收到一个字符串数组（有效防御），我们用它来填充卡片防御下拉列表。

用户选择卡防御..

Answer 1

将API包装到不同的服务中！

getCardType => return promise which resolve card types
getCardAttack => return promise which resolve card attak
getCardDefense => return promise which resolve card defense

要减少http请求，您可以缓存数据，只需调用每个API一次〜

您还可以组合服务以减少代码逻辑。

get CardInfo => return promise which resolve an object contains card type,card attack,card defense

我怎样才能优雅地避免进行多个API调用

1 个答案: