by Adam Recvlohe

通过亚当·雷夫洛厄(Adam Recvlohe)

API就像一盒巧克力 (APIs are like a box of chocolates)

If you have written JavaScript for the DOM before, then you probably know how unwieldy it can get. I mean getElementById is seven syllables and 14 characters long for goodness sake. Isn’t there an easier way?

如果您以前为DOM编写过JavaScript，那么您可能知道它会变得多么笨拙。 我的意思是，出于善意， getElementById为七个音节和14个字符长。 有没有更简单的方法？

Enter jQuery goodness. jQuery is a JavaScript library.

输入jQuery优点。 jQuery是一个JavaScript库。

Library? Like the ones where I can check out books and rent 90s movies for free? No. A library in the programming sense is a codebase that simplifies coding logic and is freely available for anyone to use. No late fees!

图书馆？ 像那些我可以免费结帐并免费租借90年代电影的人一样？ 不会。从编程的角度来说，库是一个代码库，可简化编码逻辑，并且可供任何人免费使用。 没有滞纳金！

That may not have made sense to you but I have examples.

这可能对您没有意义，但我有一些例子。

Hypothetically speaking, let’s say that I want to change the background of a div to red. I gave that div an id of ’red’ for simplicity sake. In JavaScript I would write something like this:

假设地说，我想将div的背景更改为红色。 为简单起见，我为该div赋予了一个“红色”的ID 。 在JavaScript中，我会这样写：

document.body.getElementById(‘red’).style.backgroundColor = ‘red’;

It works and gets the job done, which is all we really need. But now let’s take a look at that same functionality in jQuery.

它有效并完成了工作，这是我们真正需要的。 但是现在让我们来看一下jQuery中的相同功能。

$(‘#red’).css(‘background-color’, ‘red’);

Wow, that’s pretty! It’s everything programmers strive for: a terse and concise solution.

哇，真漂亮！ 程序员所追求的一切都是：一个简洁的解决方案。

Now you clearly see the benefits of jQuery. It’s intended to make programming in JavaScript easier.

现在，您清楚地看到了jQuery的好处。 旨在简化JavaScript编程。

But there are some drawbacks. You might think that jQuery can do everything, and that programming in jQuery is the same as in JavaScript. Both of those notions are wrong.

但是有一些缺点。 您可能会认为jQuery可以完成所有事情，并且jQuery中的编程与JavaScript中的相同。 这些观念都是错误的。

From my perspective, working with jQuery is like using Rails, the web development framework half of Ruby on Rails. You can get pretty far with using Rails without having to dive deep into learning Ruby.

在我看来，使用jQuery就像使用Rails，它是Ruby on Rails的Web开发框架的一半。 使用Rails可以使您走得更远，而不必深入学习Ruby。

However, my contention is, you can’t truly understand or appreciate JavaScript unless you predominantly use it to run your programs. That being said, there are some really great benefits to using jQuery for you to explore. The benefit we will discuss today is using jQuery to make API calls.

但是，我的争论是，除非您主要使用JavaScript运行程序，否则您将无法真正理解或欣赏JavaScript。 话虽这么说，使用jQuery确实有很多好处。 我们今天将讨论的好处是使用jQuery进行API调用。

API huh? API stands for Application Programming Interface. That’s a big fancy acronym for ‘rules of engagement’.

API，是吗？ API代表应用程序编程接口。 那是“订婚规则”的花哨缩写。

Many software applications have a set of rules that govern how they interact with other programs. I am sure that made total sense to you, but I will give you some examples for good measure.

许多软件应用程序都有一组规则来管理它们与其他程序的交互方式。 我相信这对您完全有意义，但是我会给您一些很好的例子。

For example, if you want to add a paragraph to the body of an HTML page, you might write something like this:

例如，如果要将段落添加到HTML页面的正文中，则可以编写如下内容：

var paragraph = document.body.createElement(‘P’);paragraph.textContent = ‘I am using an API, woohoo!’;document.body.appendChild(paragraph);

In the example above I used the following rules:

在上面的示例中，我使用了以下规则：

1. document.body to access the body object 2. createElement method to create an element3. textContent method to insert text into that element4. appendChild method to append that paragraph to the body

Here we would be using the DOM API. DOM stands for Document Object Model, and it’s the organization of HTML elements on a page.

在这里，我们将使用DOM API。 DOM代表文档对象模型，它是页面上HTML元素的组织。

In laymen’s terms, the DOM API “provides a structured representation” of a website. This becomes the entry point that allows programming languages to interact with the HTML of a page.

用外行术语来说，DOM API“提供了网站的结构化表示”。 这成为允许编程语言与页面HTML进行交互的入口点。

The DOM API is what provides the methods such as createElement and textContent so that you can use your fancy pants JavaScript to manipulate the DOM.

DOM API提供了诸如createElement和textContent之类的方法，因此您可以使用精美JavaScript JavaScript来操作DOM。

Did you notice I said programming languages? You can actually interact using any language, but you probably want to go with the de facto language of the web — JavaScript. I’m just saying.

您是否注意到我说过编程语言？ 实际上，您可以使用任何语言进行交互，但是您可能希望使用Web的事实上的语言-JavaScript。 我只是说。

Now that you have some context, let’s get into making a Giphy search app.

现在您已经有了一些背景，让我们开始制作Giphy搜索应用程序。

This will be fun! And I really mean it this time.

这会很有趣！ 我这次是真的。

We’ll start out by looking at a response object. A response object is the data returned after a request has been made to an API.

我们将从查看响应对象开始。 响应对象是对API提出请求后返回的数据。

Okay, let me break that down. When you type a URL into your search bar — such as eyeluvkats.com — and hit enter, a request is sent across the internet to a server that hosts the domain eyeluvkats.com.

好吧，让我分解一下。 当您在搜索栏中键入URL(例如eyeluvkats.com)并按Enter时，请求将通过Internet发送到托管eyeluvkats.com域的服务器。

Afterward, a response is sent back to the user with the contents of the website: HTML, CSS, JavaScript, images, videos, etc.

然后，将响应与网站内容一起发送回用户：HTML，CSS，JavaScript，图像，视频等。

Now, instead of requesting eyeluvkats.com, we will put in a request to the Giphy API that will return a data object. That request will be:

现在，我们不再请求eyeluvkats.com，而是向Giphy API发出请求，该请求将返回数据对象。 该请求将是：

http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cat

http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cat

Your first API call! Woohoo!

您的第一个API调用！ hoo！

The call here was made to the Giphy API and in the parameters of the URL, we requested a particular type of gif:

此处的调用是针对Giphy API的，在URL的参数中，我们请求了特定类型的gif：

gifs/random?api_key=dc6zaTOxFJmzC&tag=cat.

gifs / 随机 ？api_key = dc6zaTOxFJmzC＆ tag = cat 。

We requested a random cat gif using the random parameter, and the tag parameter of cat. I am such a millennial, sorry! What you should now see in your browser is a JSON object with data related to a random cat gif.

我们使用random参数和cat的tag参数请求了一个随机cat gif。 我是如此的千禧一代，对不起！ 现在，您应该在浏览器中看到的是一个JSON对象，其中包含与随机cat gif相关的数据。

JSON stands for JavaScript Object Notation. It’s how JavaScript sends data across the web and is routinely used as the go-to response object for large sets of API data. Have you ever created a JSON object before? No? Let’s do that now so you know how objects work in JavaScript.

JSON代表JavaScript对象符号。 这就是JavaScript通过网络发送数据的方式，通常用作大型API数据集的响应对象。 您是否曾经创建过JSON对象？ 没有？ 现在就开始做，以便您了解对象在JavaScript中的工作方式。

To create a JavaScript object, also known as an object literal, you can declare a variable to equal a pair of curly braces. For instance:

要创建JavaScript对象(也称为对象文字)，可以声明一个变量，使其等于一对花括号。 例如：

var object = {};

These objects are typically used to store data, so let’s go ahead and put your bio in there. Data in objects are stored as key/value pairs, i.e. firstName: ‘Adam’, separated with commas.

这些对象通常用于存储数据，所以让我们继续将您的生物放入其中。 对象中的数据存储为键/值对，即firstName：'Adam' ，以逗号分隔。

Go through now and add your other details like your birthday, social security number, and credit card number. When you’re done, send that object to adam@youjustgotscammed.com.

现在浏览并添加您的其他详细信息，例如生日，社会保险号和信用卡号。 完成后，将该对象发送到adam@youjustgotscammed.com。

For me, my information would look like this:

对我来说，我的信息如下所示：

var me = {    firstName: ‘Adam’,    middleName: ‘Elliott’,    lastName: ‘Recvlohe’,    favoriteFood: ‘Chipotle’,    favoriteDrink: ‘Kombucha: Gingerade’,    race: ‘Human’,    favoriteVideo: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}

That’s all well and good, but how do we access that information? Well, there are a couple ways of doing it. One way is with “dot notation” and the other is using “bracket notation”.

一切都很好，但是我们如何访问这些信息？ 好吧，有几种方法可以做到这一点。 一种方式是使用“点符号”，另一种方式是使用“括号符号”。

var me = {    firstName: ‘Adam’,    middleName: ‘Elliott’,    lastName: ‘Recvlohe’,    favoriteFood: ‘Mexican’,    favoriteDrink: ‘Kombucha’,    race: ‘Human’}// Dot Notationvar myFirstName = me.firstName;// Bracket Notationvar myLastName = me[‘lastName’];

Remember, as the object becomes more nested the more dots or brackets you will need.

请记住，随着对象嵌套的增加，您将需要更多的点或括号。

var data = {    address: {        city: ‘Tampa’,        state: ‘Florida’    }}var myCity = data.address.cityvar myState = data[‘address’][‘state’];

Sidenote: The JSON standard requires object properties and values to be in double quotes. I showed you JavaScript object literals because the way that you access data from each is the same with the syntax of JSON being only slightly different.

旁注：JSON标准要求对象属性和值必须用双引号引起来。 我向您展示了JavaScript对象文字，因为您从每个对象访问数据的方式是相同的，而JSON的语法仅稍有不同。

Now that we have that out of the way, we can start handling the data in the JSON object, which we got back from hitting the Giphy API. The object is quite large, but all I really want is the URL to the random cat gif. How would I assign that URL to a variable? Since you’re still here I will show you how I would do it:

现在我们已经解决了这个问题，我们可以开始处理JSON对象中的数据，而这是通过点击Giphy API获得的。 该对象很大，但我真正想要的只是随机cat gif的URL。 如何将该URL分配给变量？ 由于您仍在这里，我将向您展示我将如何做：

var gifURL = object.data.url;

This doesn’t do anything right now, but what I wanted to show you first is how we would handle the data to then manipulate it later.

这目前没有任何作用，但是我想首先向您展示的是我们如何处理数据，然后再对其进行操作。

We now have the basics down of handling a response object. Let’s move on to the real stuff of creating a function to call this data for us, and then manipulate that data on the screen.

现在我们有了处理响应对象的基础知识。 让我们继续介绍创建函数来为我们调用此数据，然后在屏幕上操作该数据的真实内容。

Up to this point, we haven’t really needed CodePen, but we need it now. If you want to continue to follow along I suggest opening a codepen.io account and creating a new pen.

到目前为止，我们实际上并不需要CodePen，但现在需要它。 如果您想继续进行下去，建议您打开codepen.io帐户并创建一支新笔。

With your pen open, we need to do a couple things first to set the scene. We need to add the jQuery library to our pen. In the JavaScript tab, on the left of JavaScript, you should see a gear icon. That is the settings button. Click there and what should open next are your JavaScript settings. Underneath Add External JavaScript there is a drop-down bar called Quick-add. Select jQuery. Okay, now we are good to go.

在您的笔打开的情况下，我们需要先做几件事以设置场景。 我们需要将jQuery库添加到笔中。 在JavaScript选项卡上JavaScript的左边，你会看到一个齿轮图标。 那是设置按钮。 单击此处，接下来将打开您JavaScript设置。 在“ 添加外部JavaScript”下方，有一个名为“ 快速添加”的下拉栏。 选择jQuery。 好吧，现在我们可以出发了。

When do we want to execute this call to the Giphy API? Well, by convention this is usually done when the document is ready. You probably would never have guessed that we will use the ready method in jQuery. It looks a little something like this:

我们何时要执行对Giphy API的调用？ 好吧，按照惯例，通常在准备好文档时完成此操作。 您可能永远不会猜到我们将在jQuery中使用ready方法。 看起来有点像这样：

$(document).ready(function() {})

In JavaScript, there are a few different stages in regards to content loading. There are interactive, complete, and a few others. All this is saying is that when the DOM is ready this function will be executed.

在JavaScript中，关于内容加载有几个不同的阶段。 有Interactive ， complete和其他一些。 这就是说，当DOM准备就绪时，将执行此功能。

Try it! Refresh the browser with something unique, in the ready callback function like console.log(‘Hello, World!’).

试试吧！ 在就绪的回调函数中，例如console.log('Hello，World！')，使用独特的功能刷新浏览器。

$(document).ready(function() {    console.log(‘Hello, World!’);})

If you look in your console, you should see printed Hello, World!.

如果您在控制台中查看，应该会看到打印的Hello，World!。 。

At the bottom of your codepen window you should see the word console. Click on that button and you should see the console open.

在代码笔窗口的底部，您应该看到单词console。 单击该按钮，您应该看到控制台打开。

jQuery comes with a lot of other handy functions. The next one we will need is the getJSON method. What this will do is return a response to us in JSON and give us a callback function to then do something with that data. That probably sounds a little arbitrary. Let me give you a concrete example.

jQuery附带了许多其他方便的功能。 我们将需要的下一个是getJSON方法。 这将以JSON格式返回给我们一个响应，并为我们提供一个回调函数，然后对该数据进行处理。 听起来有些武断。 让我给你一个具体的例子。

$(document).ready(function() {  var url = 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cat';      $.getJSON(url, function(object) {    console.log(object);  });});

I bet you can’t guess what this does? Okay, you proved me wrong. Of course, you know the method getJSON is sending a request to url and being returned data that is then logged in the console. You sly devil you!

我敢打赌你猜不到这是做什么的？ 好吧，你证明我错了。 当然，您知道方法getJSON向url发送请求并返回数据，然后将其记录在控制台中。 你狡猾的恶魔你！

That’s nice and all but we can do one better. We can take that object and use the url property to place a gif in the DOM. Mind…Blown…Boom!

很好，但我们可以做得更好。 我们可以使用该对象，并使用url属性在DOM中放置gif。 介意……吹……轰！

We are going to stick with using jQuery and create an image dynamically. To create an image in jQuery we can pass the image tag as a string with all necessary information like so:

我们将继续使用jQuery并动态创建图像。 要在jQuery中创建图像，我们可以将图像标签作为字符串传递，并包含所有必要的信息，如下所示：

var imageSource = object.data.image_original_url;var image = $('<img src=' + imageSource + ' />');

Now all we have to do is append that to the body of the DOM and we are good. Houston, all systems go!

现在，我们要做的就是将其附加到DOM的正文中，我们就很好了。 休斯敦，所有系统运行！

$(document).ready(function() {  var url = 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cat';      $.getJSON(url, function(object) {    var imageSource = object.data.image_original_url;    var image = $('<img src=' + imageSource + ' />');    image.appendTo($('body'));  });});

Here it is on codepen:

这是在codepen上的：

My Momma always said, “Life was like a Giphy app. You never know what you’re gonna get.” — JS Gump

我妈妈总是说：“生活就像一个Giphy应用。 你永远都不知道会得到什么。” — JS阿甘

Now every time you refresh the page you should get a new cat gif. You’re welcome!

现在，每次刷新页面时，您都应该获得一个新的cat gif。 别客气！

We can add a bit more functionality to this. Instead of getting only a random cat every time, we can instead search for the gifs we want and display some on the page. That sounds way cooler.

我们可以为此添加更多功能。 我们不必每次都只得到一只随机的猫，而是可以搜索所需的Gif并在页面上显示一些。 听起来很酷。

Before we can do this we will need an input field. The input field will take your search term and add it as a parameter to the request that is sent to the Giphy API. In your HTML add an input field.

在此之前，我们需要一个输入字段。 输入字段将使用您的搜索词，并将其作为参数添加到发送到Giphy API的请求中。 在HTML中添加一个输入字段。

<input type=‘text’ />

Up to this point, we have been making calls to the “random” API. This time, we want to search. I wonder what API that is? Oh I see, it’s called ‘search’. On Giphy’s home page we have a nice example URL:

到目前为止，我们一直在调用“随机” API。 这次，我们要搜索。 我想知道这是什么API？ 哦，我知道了，这叫做“搜索”。 在Giphy的主页上，我们有一个很好的示例URL：

http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC

http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC

That’s a litter box worth of data! By default Giphy will return 25 results. As you can see in the URL the way these items are searched is using the q parameter, which in this case equals funny+cats. If we want to search for some other set of terms then all we would have to do is capture the input from the user and when they hit enter a new request is sent to the API. Let’s do that now.

那是一个垃圾箱里的数据！ 默认情况下，Giphy将返回25个结果。 正如您在URL中看到的那样，搜索这些项目的方式是使用q参数，在这种情况下，该参数等于funny + cats 。 如果我们要搜索其他术语集，那么我们所要做的就是捕获用户的输入，当他们点击输入时，就会向API发送新请求。 现在开始吧。

To capture the input from the user we need to use the jQuery val method on the input.

为了捕获用户的输入，我们需要在输入上使用jQuery val方法。

$(document).ready(function() {   var value = $('input').val();});

But how do we actually get that value? We need to add an event listener so that when the user hits enter we can capture that value and send it off to the getJSON method. In jQuery, event listeners are also shorter. We will listen for the keypress event but only for the enter key, which is designated as 13. Remember that event listeners provide a callback function that passes in the event from the DOM. There is one little hiccup, though. The value that we get returned will be a string, meaning it won’t have the ‘+’ operator between each word. Because jQuery is written in JavaScript this allows us to use vanilla JavaScript methods in our script. I will use the replace method to change out spaces with the ‘+’ operator.

但是，我们如何真正获得该价值？ 我们需要添加一个事件侦听器，以便当用户点击回车时我们可以捕获该值并将其发送给getJSON方法。 在jQuery中，事件侦听器也较短。 我们将侦听keypress事件，但仅侦听Enter键(指定为13)。请记住，事件侦听器提供了一个回调函数，可从DOM中传递事件。 不过，有一点打h。 我们返回的值将是一个字符串，这意味着它在每个单词之间都没有'+'运算符。 由于jQuery是用JavaScript编写的，因此我们可以在脚本中使用普通JavaScript方法。 我将使用replace方法通过'+'运算符更改空格。

$(document).ready(function() {  $(’input’).keypress(function(event) {    if(event.which == 13) {      var value = $(’input’).val();      value = value.trim().replace(/\s+/g, '+’);      console.log(value);      event.preventDefault();    }         }); });

The replace method that is built into JavaScript takes two parameters: a regular expression and what you want a match to be replaced with. In my regular expression, I am using a special character, \s. This represents white space. I added a ‘+’ operator on the end to signify that I want to capture any number of white spaces in a string, \s+. My thinking is a user may put more than one space between words and I want to correct that mistake if it happens.

JavaScript内置的replace方法带有两个参数：一个正则表达式和您要替换的匹配项。 在我的正则表达式中，我使用的是特殊字符\ s 。 这代表空白。 我在末尾添加了一个'+'运算符，表示我想捕获字符串\ s +中的任意数量的空格。 我的想法是，用户可能会在单词之间放置多个空格，如果发生错误，我想纠正该错误。

This is a very primitive solution but for our purposes it works. If you look in your console, you should see your string text combined with ‘+’ operators. Good, we got that down. Now we can compose a URL of the search API and the value we are searching for.

这是一个非常原始的解决方案，但出于我们的目的，它可以工作。 如果您在控制台中查看，则应该看到字符串文本与“ +”运算符结合在一起。 好，我们把它记下来了。 现在，我们可以组成搜索API的URL和要搜索的值。

$(document).ready(function() {  $(’input’).keypress(function(event) {    if(event.which == 13) {      var value = $(’input’).val();      value = value.trim().replace(/\s+/g, '+’);      var url = 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=' + value;      console.log(url);      event.preventDefault();    }         }); });

In your console, you should see the new URL we are sending out to the Giphy API. Next, we can actually send out our call using getJSON.

在控制台中，您应该看到我们正在发送给Giphy API的新URL。 接下来，我们实际上可以使用getJSON发送呼叫。

$(document).ready(function() {  $(’input’).keypress(function(event) {    if(event.which == 13) {      var value = $(’input’).val();      value = value.trim().replace(/\s+/g, '+’);      var url = 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=' + value;      $.getJSON(url, function(object) {        console.log(object);      });    event.preventDefault();    }         }); });

The JSON response object will be quite large and you won’t be able to see it using the CodePen console. Instead, in the top right where it says Change View, click and scroll down to Debug Mode. A new window will open. Right-click on the new window and scroll down to Inspect. A panel on the right or bottom of the screen should show. Now, click on the tab that says console. If you refresh the browser, put some words into the input field and click enter, you should see the response object show in the log.

JSON响应对象将非常大，您将无法使用CodePen控制台看到它。 而是在右上角显示更改视图的地方，单击并向下滚动到Debug Mode 。 将打开一个新窗口。 右键单击新窗口，然后向下滚动到Inspect 。 屏幕右侧或底部的面板应显示。 现在，单击显示console的选项卡。 如果刷新浏览器，请在输入字段中输入一些单词，然后单击Enter，您应该会在日志中看到响应对象。

Now if you type in some words in the input you should get back a hairball size of an object with an array of 25 objects. Okay, we have our data but it still is not displaying on the screen. What we need to do is iterate over the array, get every image URL and then create an img tag for each of them and append each one to the DOM. Pretty easy huh? Okay, let’s walk through it.

现在，如果您在输入中输入一些单词，您应该获得一个包含25个对象的数组的对象的毛发大小。 好的，我们有数据，但是它仍然没有显示在屏幕上。 我们需要做的是遍历数组，获取每个图像URL，然后为每个图像创建一个img标签，并将每个添加到DOM。 很简单吧？ 好吧，让我们逐步了解一下。

object.data.forEach(function(gif) {  var url = gif.images.original.url;  var image = $('<img src=' + url + ' />');  image.appendTo($('body'));});

The forEach method, a vanilla JavaScript method, will iterate through all the arrays and we are assigning each array object to the gif variable. Within each of the gif objects is the images.original.url property that is the URL we need to set the src attribute of each image tag.

forEach方法(一种普通JavaScript方法)将遍历所有数组，并且我们将每个数组对象分配给gif变量。 每个gif对象中都有images.original.url属性，这是我们需要设置每个图像标签的src属性的URL。

After we have that data we can now create the img tag, assigning the URL to the src attribute. We then append that image to the DOM.

有了这些数据之后，我们现在可以创建img标签，将URL分配给src属性。 然后，我们将该图像附加到DOM。

Bada bing, bada boom, you now have an endless supply of gif bliss at your fingertips.

Bada bing，Bada繁荣时期，现在您触手可得的gif极乐无限。

The completed projected now looks something likes this:

现在，完成的投影看起来像这样：

And here it is on CodePen:

在CodePen上：

You probably didn’t think that accessing and using APIs was so easy. But as you can see, from just a kitty size line of code, you were able to dynamically change your site from just a nice random cat image app to a much more powerful Giphy search app.

您可能不认为访问和使用API​​这么容易。 但是，正如您所看到的那样，您只需要从小猫大小的一行代码中就可以动态地将您的网站从一个不错的随机猫图片应用更改为功能更强大的Giphy搜索应用。

As you can also tell, the styles look sad. Make use of what you have learned in web development so far to make this into an awesome app with your additional styles. Be creative with it but more importantly have fun!

如您所知，样式看起来很可悲。 利用到目前为止在Web开发中学到的知识，将其添加到其他样式的出色应用中。 要有创造力，但更重要的是要有乐趣！

Sidenote: The API key we used was intended for development purposes only, not for production. That means you can’t go wild and make a million calls to the Giphy API. They will shut you down.

旁注：我们使用的API密钥仅用于开发目的，而非用于生产。 这意味着您不能疯狂地对Giphy API进行一百万次调用。 他们会让你失望。

I hope you had another great time learning about the wonderful world of JavaScript. Until next time, may you and APIs go together like peas and carrots!

希望您能在学习JavaScript的美好世界中度过一段美好的时光。 在下一次之前，请您和API像豌豆和胡萝卜一样一起使用！

翻译自: https://www.freecodecamp.org/news/javascript-libraries-and-apis-e9d674dc5690/