GIPHY API每次返回相同结果，求优雅的随机GIF获取方案

我明白你的困扰——每次搜同一个关键词都拿到一模一样的GIF确实挺烦的，而且硬拉大量数据再筛选也不是长久之计。其实GIPHY API本身就有支持随机返回结果的方式，给你两个优雅的解决方案：

方案一：利用Search API的offset参数实现随机分页 #

GIPHY的Search API支持offset参数，用来指定结果集的起始位置。我们可以每次请求时生成一个随机的offset值，这样就能从不同的结果页里获取内容，自然就不会重复了。

具体做法：

• 生成一个合理范围的随机数作为offset（比如0到1000，GIPHY的GIF库足够大，这个范围内的结果不会频繁重复），无需额外获取总结果数，简单高效。

修改你的fetchGIFs方法，加入随机offset：

async fetchGIFs(number) {
  let apiKey = "myKey"; // 保留你的密钥
  let searchEndPoint = "https://api.giphy.com/v1/gifs/search?";
  let limit = number;
  // 生成0-999之间的随机offset，可根据需求调整范围
  let offset = Math.floor(Math.random() * 1000);
  let gifsArray = [];
  // 拼接url时加入offset参数
  let url = `${searchEndPoint}api_key=${apiKey}&q=${this.searchText}&limit=${limit}&offset=${offset}`;
  try {
    let response = await fetch(url);
    let json = await response.json();
    json.data.forEach(gif => {
      gifsArray.push({
        url: gif.url,
        preview: gif.images.preview_gif.url,
        src: gif.images.original.url,
        height: gif.images.original.height,
        width: gif.images.original.width
      });
    });
    return gifsArray;
  } catch (error) {
    console.log("Ooops, take a look at this error: " + error);
  }
}

方案二：使用GIPHY的Random API（适合获取完全随机的GIF） #

如果你需要的是完全无规律的随机结果，可以直接用GIPHY的Random API，它每次会返回一个匹配关键词的随机GIF。如果需要多个，循环调用几次即可。

示例代码如下：

async fetchRandomGIFs(number) {
  let apiKey = "myKey";
  let randomEndpoint = "https://api.giphy.com/v1/gifs/random?";
  let gifsArray = [];
  
  for (let i = 0; i < number; i++) {
    try {
      let url = `${randomEndpoint}api_key=${apiKey}&tag=${this.searchText}`;
      let response = await fetch(url);
      let json = await response.json();
      let gif = json.data;
      gifsArray.push({
        url: gif.url,
        preview: gif.images.preview_gif.url,
        src: gif.images.original.url,
        height: gif.images.original.height,
        width: gif.images.original.width
      });
    } catch (error) {
      console.log("Error fetching random GIF: " + error);
    }
  }
  return gifsArray;
}

// 修改findGIF方法调用新的随机获取方法
findGIF() {
  let temp = [];
  (async () => {
    try {
      temp = await this.fetchRandomGIFs(5);
      this.gifs.push(...temp);
    } catch (err) {
      console.log("Have a look at this: " + err);
    }
  })();
}

为什么原来的代码会重复？ #

GIPHY的Search API默认是按相关性排序返回结果的，当你使用相同的搜索词、limit参数时，它会返回相同的前N个结果，除非你改变排序方式或者分页位置。上面的两种方法都是从API层面解决了随机化的问题，比本地筛选要高效得多。

内容的提问来源于stack exchange，提问作者Harleston