Dog App：将Javascript与API结合使用

作为开发人员的一个非常重要的方面是连接到API，以从名为JSON的资源中获取数据，该资源代表Javascript Object Notation。JSON的一些常见用例包括：

储存资料
生成数据结构以供用户在您的应用程序上输入
将数据从服务器传输到客户端。它主要是来回连接。客户端到服务器以及服务器到服务器。
配置和验证数据（GET，POST，PATCH，PUT，DELETE）

在本教程中，我们将使用纯JavaScript制作一个非常简单的Web应用程序，该应用程序将从API检索信息并将其显示在客户端页面上。

你需要知道的

HTML / CSS的基本知识。
JavaScript的基础知识。
使用DOM API。
通过API使用JSON和JavaScript对象的基本知识。

我们将从本教程中获得什么

构建一个可以显示各种狗的工作应用。
从其API提取新的狗图像之前，请显示加载微调框。
从API获取数据。

它看起来像这样。

让我们开始吧。

介绍

首先，我们将利用HTTP请求与可公开访问的URL端点进行通信。我们将使用的HTTP方法是GET，它检索资源。由于我们的目标是创建一个简单的Web应用程序，而无需安装任何框架或库样板（例如React，Vue等），因此我们将使用HTML，CSS和JavaScript。

建立我们的工作环境

我们将使用我选择的编辑器vs代码创建此Web应用程序。您可以使用任何其他您愿意使用的IDE。打开编辑器，并在新目录中创建index.html并在下面添加以下代码。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Dogs API</title>
  </head>
  <body>
    <main>
      <div class="container">
        <header>
          <h1>Dog Viewer</h1>
          <select class="breeds"></select>
        </header>
      </div>
      <div class="img-container">
        <div class="container">
          <div class="spinner">
            🐶
          </div>
          <img
            src="http://placecorgi.com/260/180"
            class="dog-img show"
            alt="friendly and intimate - man's best friend"
          />
        </div>
      </div>
    </main>
  </body>
</html>

通过上面的代码，我们的应用程序将更加专注于JavaScript和API，以使其与DOM一起使用。为了美化结构化CSS，了解CSS flexbox很重要，因为您可以复制代码。

style.css

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

main {
  height: 100vh;
  width: 100%;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  padding: 5px 40px 0;
}

main .container header h1 {
  font-family: Nunito;
  font-size: 1.5rem;
}

main .container header select {
  font-size: 1.2rem;
  padding: 5px;
  font-family: Poppins;
  text-transform: capitalize;
}

main .img-container {
  width: 100%;
  margin-top: 5%;
  padding: 2em 0;
}

/* animation for the dog spinner */
main .img-container .spinner {
  font-size: 50px;
  animation: spin 2s linear infinite;
  display: none;
}

main .img-container .dog-img {
  display: none;
  width: 80%;
  margin: 1em auto;
}

main .img-container .show {
  display: block;
}


/* rotate the dog spinner 360deg - keyframes */
@keyframes spin {
  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}


/ * media query */

@media only screen and (min-width: 320px) {
  .container header {
    display: flex;
    flex-direction: column;
  }
  .container header h1 {
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 650px) {
  .container header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
  }
}

@media only screen and (min-width: 875px) {
  .container {
    max-width: 80%;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 1600px) {
  .container {
    max-width: 70%;
    margin: 0 auto;
  }
}

现在我们有了HTML和CSS设置，是时候在项目目录中设置app.js了。

连接到实际的API

让我们来看看dogs ceo API，并探索它为开发人员提供的功能，使我们能够检索其数据并在应用程序的客户端上使用它。
首先，请转到网站文档上的所有品种列表。它将向我们显示API端点https://dog.ceo/api/breeds/list/all的URL 。单击链接将显示狗类型的对象。

app.js

const BREEDS_URL = 'https://dog.ceo/api/breeds/list/all';

const select = document.querySelector('.breeds');

fetch(BREEDS_URL)
  .then(res => {
    return res.json();
  })
  .then(data => {
    const breedsObject = data.message;
    const breedsArray = Object.keys(breedsObject);
    for (let i = 0; i < breedsArray.length; i++) {
      const option = document.createElement('option');
      option.value = breedsArray[i];
      option.innerText = breedsArray[i];
      select.appendChild(option);
    }
    console.log(breedsArray);
  });

select.addEventListener('change', event => {
  let url = `https://dog.ceo/api/breed/${event.target.value}/images/random`;
  getDoggo(url);
});

const img = document.querySelector('.dog-img');
const spinner = document.querySelector('.spinner');

const getDoggo = url => {
  spinner.classList.add('show');
  img.classList.remove('show');
  fetch(url)
    .then(res => {
      return res.json();
    })
    .then(data => {
      img.src = data.message;
    });
};

img.addEventListener('load', () => {
  spinner.classList.remove('show');
  img.classList.add('show');
});

我们在这里所做的第一件事是为API端点URL声明一个变量，该变量是一个常量，因为我们不希望在整个开发过程中对其进行更改。

回到我们的index.html，记住带有品种类别的select标签。在这里，我们将确保创建一个下拉菜单供用户选择，以使用另一个菜单更改当前图像。

接下来要做的是从响应中提取JSON正文内容，我们使用JSON（）方法，该方法向我们返回一个承诺，该承诺将使用来自端点的数据解析为对该请求的响应。

从品种API列表中查看端点