npm 包 giphy-api 使用教程

阅读时长 3 分钟读完

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