GIPHY API每次都返回相同的结果
我有一个问题，GIPHY API总是返回相同的结果。而且我非常确定这不是因为我以某种方式存储了先前的结果并一次又一次地发布。例如，我输入“ dog”并要求5个结果。我得到5个gif文件，然后刷新页面并重复该过程，并获得完全相同的gif文件。
是否有一个优雅的解决方案，每次发出请求时都可以随机获取gif？
我想到的解决方案是：当我重复请求时，我会（在幕后）请求10个gif，然后从这些新的10个gif中仅在页面上发布5个新的gif，但是这种解决方案在所需的gif数量将变大。
到目前为止，这是我的代码：
<v-container>
<v-layout text-center wrap>
<v-flex xs12>
<v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200"></v-img>
</v-flex>
<v-text-field label="Search" outlined rounded v-model="searchText"></v-text-field>
<v-btn outlined rounded block @click="findGIF">Search</v-btn>
<div class="gifs" v-show="showGIFs" ref="gifs">
<div v-for="(gif, index) in gifs" :key="index">
<img class="gif" :src="gif.preview" />
</div>
</div>
</v-layout>
</v-container>
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
你的问题与阿里云的产品和服务不直接相关，但我会尝试从技术角度给你一些建议来解决GIPHY API返回相同结果的问题。
GIPHY API通常允许你通过设置查询参数来调整返回结果。一个可能的解决方案是在每次请求时加入随机偏移量（offset）或者使用不同的排序方式（比如random排序，如果API支持的话）。这样可以确保每次请求得到不同的结果。下面是一个修改你代码示例的思路：
- 增加随机偏移量：在请求中加入一个随机的偏移量参数，以跳过前N个结果，从而每次获取不同的GIF。例如，你可以生成一个随机数并用它作为偏移量。
function fetchRandomGifs() {
let offset = Math.floor(Math.random() * 100); // 假设GIPHY API允许的最大偏移量足够大
let url = `https://api.giphy.com/v1/gifs/search?api_key=${apiKey}&q=dog&limit=5&offset=${offset}&rating=g`;
fetch(url)
.then(response => response.json())
.then(data => {
let gifs = data.data;
gifs.forEach(gif => {
let img = document.createElement('img');
img.src = gif.images.fixed_height.url;
document.getElementById('gifs').appendChild(img);
});
})
.catch(error => console.error('Error:', error));
}
-
检查API文档：查看GIPHY API的官方文档，看是否有直接支持随机返回结果的参数或方法。有的API提供如
sort参数，允许设置为random来随机排序结果。 -
缓存和轮换策略：如果你的应用场景允许，可以考虑实现一个简单的缓存机制，存储之前请求过的GIF ID，并在下次请求时排除这些已显示的ID，直到缓存池被清空或达到一定数量后再重新开始循环。
-
批量请求后筛选：虽然你提到这个方案在需要大量GIF时不太理想，但如果其他方法不可行，这仍是一种选择。你可以根据实际需求调整请求的数量和展示逻辑，以平衡性能和多样性。
记得替换${apiKey}为你自己的GIPHY API密钥，并根据GIPHY API的实际参数进行调整。希望这些建议能帮助到你！
