分類
數字趨勢

API如何工作以及如何将它们集成到您的应用程序中

应用程序编程接口(API)是构建智能应用程序的最终捷径之一。这是两个应用程序之间的通信通道。无论是否故意,您在浏览Internet或在日常生活中使用程序时都曾使用过API。

尽管API通常会发送复杂的数据作为响应,但是您如何理解和使用这些信息来为您的用户服务? API使经验丰富的开发人员和新开发人员都可以轻松地生活。因此,您需要知道如何在应用程序中使用它们。

在这里,通过一些用例和示例,我们来看一下如何使用API​​作为开发人员来服务程序。

API如何工作?

开发人员将API创建为可以服务其他开发人员的产品。目的是使消费者开发人员或企业轻松,高效,快速地完成复杂的Web开发过程。

现在,大多数企业都依赖第三方API来解决问题并更好地为其客户服务。但是,使用API​​并不像许多人想象的那么复杂。您可以将其视为第三方解决方案,当您发出特定的HTTP请求时,该解决方案以数据形式为您提供特定的响应。

使用API​​就像在比萨餐厅下订单。你不能去厨房告诉他们你想要什么。您需要一个服务员来接受您的订单并将其传达给厨房,然后再带回披萨。

您可以将API视为您和厨房之间的链接。在这种情况下,您是提供服务员(API)的光顾餐厅的客户。然后,服务员会以您选择的披萨(数据)作为回应。在真实的API中,您的Web应用是客户端通过发出终结点HTTP请求来请求通过其API使用提供程序的内容的客户端。

什么是API端点?

连接到API要求您将程序插入API端点。您可以将其视为双向连接。连接到程序的端点发送一个请求,而连接到API的端点向您反馈特定的响应。

端点是一个URL,该URL请求并给予客户端直接访问API资源的权限。

除了使用API​​获取数据外,您还可以将服务提供商的请求发布到客户端,使用PUT方法从服务提供商获取更多信息,以及使用DELETE方法从程序中删除现有数据。这些方法通常都可以在API文档中找到。

连接到API的条件

将API与您的程序集成不仅是一个自发的决定-它是预先考虑的。您必须知道所需的信息以及所需的信息。这样可以降低复杂性,尤其是当您处理多维数组形式的JSON数据时。这种做法还可以使您获得程序所需的特定信息。

有数百种API,它们具有不同的连接规则。尽管某些API是免费和开源的,但其他API只能以订阅方式访问。

尽管有些是无缝和直接的,不需要任何先决条件,但其他API可能需要先满足一些条件,例如生成API密钥或注册开发人员帐户,然后才能连接到其端点。

相关:使用Aviationstack API将飞行数据集成到您的项目中

但是,任何API的最重要方面之一就是其文档。最佳实践是阅读并遵循要与之连接的任何API的文档,以获取有关如何编码和使用其资源的指南。这是因为每个API都有自己的连接方法和说明。

要连接任何API,您还需要了解其支持的编程语言。

如何连接到API:实际示例

没有连接到API的特定方法,但是一些示例将向您展示如何使用应用程序使用API​​数据的基本概念。但是在继续之前,我们已经写了几篇有关API以及如何使用它们的文章。

例如,我们有一篇有关如何与Weatherstack API连接的详细文章,它使您可以访问实时天气数据。我们还写了有关如何使用Mediastack API的信息Mediastack API是一种付费API,可用于向网站添加新闻标题。

让我们看一些有关如何连接到API的简短代码示例。

如何使用Iro.js拾色器API

Iro.js是一个简单的API,可让您向网站添加免费的颜色选择器。当您在色轮上选择一个色点时,API将返回该颜色的十六进制或RGB代码。要连接到iro.js API,您需要做的就是将其内容分发网络(CDN)端点粘贴到DOM的头部

有关此API的完整文档,请访问iro.js.org 。让我们看看如何使用下面的示例代码片段连接到该API:

 <!DOCTYPE html>
<html>
<head>
<title>Practice Slider</title>
<script src="https://cdn.jsdelivr.net/npm/@jaames/[email protected]"></script>
</head>
<body>
<button id="color-button" onclick="sample()">Display color picker</button>
<div id="color-circle"> </div>
<div id="color-code"> </div>
</body>
<script>
let colors= document.getElementById('color-code');
const sample= ()=>{
var colorPicker = new iro.ColorPicker('#color-circle', {
// Set the size of the color picker
width: 320,
// Set the initial color to pure red
color:"#ff0000"
});
colorPicker.on(['color:change', 'color:init'], function(color) {
// log the current color as a HEX string
colors.innerHTML=color.hexString;
});
};
</script>
</html>

对于上面的示例API,您不需要连接到它的API密钥。但是,为了更好地理解它,请仔细看一下JavaScript。要连接此API,我们只需要从iro类中调用ColorPicker函数,然后将色轮容器的id传递给该类即可。

iro.js API的端点很容易连接,因为它的开发人员已经完成了为用户编写类的额外工作。下图是以上示例代码的结果。

要查看颜色变化事件如何发生,您可以打开另一个HTML文件,并将以下代码粘贴到其脚本部分:

 var colorPicker = new iro.ColorPicker('#color-pick', {
// Set the size of the color picker
width: 400,
// Set the initial color to pure red
color:"#ff0000"
});
const myColor =(color)=>{
console.log(color.hexString);
};
colorPicker.on("color:change", myColor);

每次更改轮盘上颜色选择器的位置时,以上代码都会记录十六进制颜色值。

相关:使用Marketstack API招待您的网站访问者

注意:所有示例代码都是遵循API文档中说明的结果。

如何使用NoCodeAPI货币兑换API

NoCodeAPI提供了许多API,包括货币转换器API。要连接到其货币兑换端点,请转到NoCodeAPI市场并创建一个帐户。

登录后,页面上方会出现一个搜索栏。在该搜索栏中,输入货币兑换,出现查询后,点击激活

在下一页上,点击货币兑换API 。接下来,输入API的首选名称,然后点击创建

创建API后,点击查看文档。接下来,选择一种首选语言以查看用于连接到API端点的代码。然后,您可以复制该示例代码并将其粘贴到您的应用程序中以进行进一步的自定义。

请看下面的示例代码,以进行货币换算:

 <!DOCTYPE html>
<html>
<head>
<title>Currency converter</title>
</head>
<div id="currency"> </div>
</body>
<script>
let currency= document.getElementById('currency');
async function callingFn() {
try {
const response = await fetch("https://v1.nocodeapi.com/techyprem/cx/FHNXhKRkWDCvMehl/rates/convert?amount=10&from=USD&to=Eur", {
method: "get",
headers: {
"Content-Type": "application/json"
}
});
const json = await response.json();
currency.innerHTML="Success:" + JSON.stringify(json);
} catch (error) {
console.error("Error:", error);
}
}
callingFn();
<script>
</html>

上面的代码只是文档中的代码的修改版本。但是,请密切注意JavaScript响应变量中的转换参数。

原始JSON输出如下所示:

 Success:{"query":{"from":"USD","to":"EUR","amount":10},"info":{"time":1604587505388,"rate":0.844865},"result":8.44865,"text":"10 USD = 8.44865 EUR"}

利用API

为您的应用程序使用API​​可以使您更快地完成项目。尽管某些API文档可能是技术性的,但其中的许多文档对于新手来说都很方便。

但是,正如我们前面所述,要充分利用要从中挖掘数据的所有API,必须仔细研究其文档并遵守连接规则。

尽管我们在这里的示例中使用了JavaScript,但是根据API的类型,它们中的大多数仍然还支持其他编程语言。您可以从任何API的文档中获取有关语言支持的信息。另外,请注意,我们这里使用的示例只是许多API用例中的几个。