Giphy-api 是一个通过提供 Giphy API 的接口，方便前端开发人员从 Giphy 图库中获取 GIF 图片的 npm 包。本篇文章将详细介绍 giphy-api 的安装及使用教程。
安装
我们需要先在命令行中使用以下命令来安装 giphy-api：
--- ------- --------- ------
安装成功后，我们需要在项目的 JavaScript 文件中引入 giphy-api。
----- ----- - -----------------------
在这里我们需要注意的是，我们需要调用 giphy-api 之后，传递一个空对象以初始化它，否则会抛出一个错误。
使用
接下来我们将介绍 giphy-api 的使用方法。
按关键字搜索 GIF 图片
我们可以根据关键字来搜索 GIF 图片，搜索结果将返回一个包含多个对象的数组，每个对象包含了该 GIF 的完整信息。
------------------- ------- -------------------- -- - --------------------------- -------------- -- - ------------------- ---
在这里我们使用 giphy.search() 方法来搜索符合关键字 “dog” 的 GIF 图片。我们还在第二个参数中定义了将返回 GIF 数量的限制，本例中设为 10。搜索结果将通过一个 Promise 对象进行异步返回，在我们的代码执行完毕后，将通过控制台打印出返回结果。
获取 Trending GIF 图片
我们也可以通过 giphy.trending() 方法来获取 Trending(热门) GIF 图片，它会返回 Trending GIF 图片的数组。
---------------------- -------------------- -- - --------------------------- -------------- -- - ------------------- ---
此处不同与搜索方法的是，我们没有提供任何关键字，而是使用 giphy.trending() 方法来获取 Trending GIF 图片。提供了一个可选的第二个参数，指定我们需要获得哪么多的 GIFs。
手动指定搜索参数
我们也可以在 giphy.search() 中手动指定一些额外的搜索参数。
-------------- -- ------ ------- ---- ------ -- ------------------ -- - --------------------------- -------------- -- - ------------------- ---
在这个例子中，我们指定了一个搜索参数 q 和 rating，q 是我们的关键字，rating 则用于指定我们需要搜索的 GIF 评分。limit 参数也已禁用，因为我们希望搜索结果包含多达 20 个 GIFs。
高级搜索
对于一些更具有复杂性的搜索，我们可以使用 giphy 中的多种方法，如 giphy.random() 方法可获取随机 GIF 图片等。
结语
到此，我们已经完成了使用 giphy-api 搜索 GIF 图片的教程。Giphy-api 还有更多其他的特性和功能，我们可以通过阅读官方文档来了解更多。希望这篇文章能够对您进一步探索 Giphy API 带来帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/200440