使用fetch（）从OMDBAPI获取电影数据电视电影小迷妹 TVco.cn

在＃100DaysofCode挑战的第三周中，我想学习有关Async和使用API的更多信息，所以我想制作一个小的应用程序功能来测试我的知识。经过几个小时的搜索和筛选选项，我发现了一个称为OMDB API（开放电影数据库）的API，它是一种RESTful Web服务，用于检索电影或系列信息（标题，情节，演员，年份，海报等）。所以我选择创建一个名为Movie Catalog的小应用程序。

提出第一个要求

要发出请求，我们需要一个API密钥。您可以通过注册表获得一个。在他们的[网站]中。

http://www.omdbapi.com/?apikey=[your-apikey]&

玩API

可以通过三种方式进行请求：

搜索（s =）：检索所有可能的选项。
标题（t =）：电影标题。
ID（i =）：有效的IMDB ID（例如tt1234567）。

我们还可以在请求中包含更多选项，例如返回的数据类型（JSON / XML），内容类型（电影，系列或剧集），电影的年份等。您可以通过阅读以下内容了解更多选项他们的文件。

这是我们对蝙蝠侠电影的要求：

http://www.omdbapi.com/?apikey=[your-apikey]&s=batman

但是，等等，我们必须为此请求使用一个函数，这就是JavaScript和fetch API发挥作用的地方。

什么是提取API？

Fetch（）允许您使用Promises发出http请求，以获得更简单的功能，避免回调地狱，并且如果您不想使用框架，则避免使用XMLHttpRequest。

提取将必需的参数作为要检索的资源路径，如果是否旋转则返回承诺。

我们的提取请求如下所示：

 提取（ http://www.omdbapi.com/?apikey=[your-apikey]&s=batman ） 
  .then（（success）=> {success.json（）}） 
  .then（（电影）=> {console.log（电影）}） 
  .catch（（错误）=> {console.log（错误）}）;

fetch（）的最酷功能之一是链接诺言。发出请求后，我们以JSON解析信息，然后链接到另一个诺言，将信息打印在屏幕上，然后是wallah !!!! ，其中包含JSON电影。

  {搜索： 
  [{标题：“蝙蝠侠开始”， 
 年：'2005'， 
  imdbID：'tt0372784'， 
 类型：“电影”， 
 海报：“ https://m.media-amazon.com/images/M/MV5BZmUwNGU2ZmItMmRiNC00MjhlLTg5YWUtODMyNzkxODYzMmZlXkEyXkFqcGdeQXVyNTIzOTk5ODM@._V1_SX300.jpg” 
  {标题：“蝙蝠侠对超人：正义曙光”， 
 年：'2016'， 
  imdbID：'tt2975590'， 
 类型：“电影”， 
 张贴者：“ https://m.media-amazon.com/images/M/MV5BYThjYzcyYzItNTVjNy00NDk0LTgwMWQtYjMwNmNlNWJhMzMyXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg” 
  {标题：“蝙蝠侠”， 
 年：“ 1989”， 
  imdbID：'tt0096895'， 
 类型：“电影”， 
 海报：“ https://m.media-amazon.com/images/M/MV5BMTYwNjAyODIyMF5BMl5BanBnXkFtZTYwNDMwMDk2._V1_SX300.jpg'}， 
  {标题：“蝙蝠侠归来”， 
 年：“ 1992”， 
  imdbID：'tt0103776'， 
 类型：“电影”， 
 张贴者：“ https://m.media-amazon.com/images/M/MV5BOGZmYzVkMmItM2NiOS00MDI3LWI4ZWQtMTg0YWZkODRkMmViXkEyXkFqcGdeQXVyODY0NzcxNw@@..VV_}SX300.jpg” 
  {标题：“永远的蝙蝠侠”， 
 年：'1995'， 
  imdbID：'tt0112462'， 
 类型：“电影”， 
 张贴者：“ https://m.media-amazon.com/images/M/MV5BNWY3M2I0YzItNzA1ZS00MzE3LThlYTEtMTg2YjNiOTYzODQ1XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_}XX.jpg 
  {标题：“蝙蝠侠与罗宾”， 
 年：'1997'， 
  imdbID：'tt0118688'， 
 类型：“电影”， 
 张贴者：“ https://m.media-amazon.com/images/M/MV5BMGQ5YTM1NmMtYmIxYy00N2VmLWJhZTYtN2EwYTY3MWFhOTczXkEyXkFqcGdeQXVyNTA2NTI0MTY@._V1_SX300.jpg” 
  {标题：“乐高蝙蝠侠电影”， 
 年：'2017'， 
  imdbID：'tt4116284'， 
 类型：“电影”， 
 张贴者：“ https://m.media-amazon.com/images/M/MV5BMTcyNTEyOTY0M15BMl5BanBnXkFtZTgwOTAyNzU3MDI@._V1_SX300.jpg”}， 
  {标题：“蝙蝠侠：动画系列”， 
 年：“ 1992–1995”， 
  imdbID：'tt0103359'， 
 类型：“系列”， 
 张贴者：“ https://m.media-amazon.com/images/M/MV5BNzI5OWU0MjYtMmMwZi00YTRiLTljMDAtODQ0ZGYxMDljN2E0XkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_SX300。 
  {标题：“蝙蝠侠：红帽之下”， 
 年：“ 2010”， 
  imdbID：'tt1569923'， 
 类型：“电影”， 
 张贴者：“ https://m.media-amazon.com/images/M/MV5BYTdlODI0YTYtNjk5ZS00YzZjLTllZjktYmYzNWM4NmI5MmMxXkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_SX300。 
  {标题：“蝙蝠侠：黑暗骑士归来，第1部分”， 
 年：“ 2012”， 
  imdbID：'tt2313197'， 
 类型：“电影”， 
 海报：“ https://m.media-amazon.com/images/M/MV5BMzIxMDkxNDM2M15BMl5BanBnXkFtZTcwMDA5ODY1OQ@@._V1_SX300.jpg'}]， 
  totalResults：“ 345”， 
 回应：'True'}

这是我所做的搜索功能的预览

感谢您抽出宝贵的时间阅读我的文章，希望您喜欢它。