设置limit=10时GIPHY API仅返回单个GIF的JavaScript技术问题
解决GIPHY API返回单个GIF的问题
嘿,我一眼就揪出问题所在啦!你当前使用的是GIPHY的translate接口,这个接口的核心设计就是返回单个最匹配搜索词的GIF——不管你设置多少limit参数,它都只会返回一个结果,这是接口本身的特性哦。
要获取多个GIF结果,你需要改用GIPHY的search接口,这个接口才支持通过limit参数指定返回的数量。下面是修改后的代码:
async function searchQuery(searchID){ const myKey = "mykey"; // 隐私原因已删除 // 替换为search接口,修正参数中的转义符(&改成&) const response = await fetch(`https://api.giphy.com/v1/gifs/search?api_key=${myKey}&s=${searchID}&limit=10`, {mode: "cors"}); const result = await response.json(); console.log(result); } // 调用时记得传入具体搜索关键词,比如"dog" searchQuery("dog").catch(function errorMessage(error){ console.log(error); });
另外还有两个小细节需要注意:
- 原代码里的
&是HTML转义后的字符,在JavaScript字符串中应该直接使用&; - 调用
searchQuery时要传入具体的搜索关键词,不然接口可能返回空结果或默认内容。
这样修改后,你就能拿到最多10个匹配的GIF结果啦!
内容的提问来源于stack exchange,提问作者notmynamelastname




