JavaScript好用的API

JavaScript好用的API，API 在 Internet 上无处不在，知道如何与它们交互是现代 Web 开发人员的一项重要技能。能够访问第三方数据并与之交互可以通过许多很酷的方式将您的应用程序提升到一个新的水平！在本文中，我们将了解开发人员可以访问的一些最佳 API 以及 APILayer 如何使访问变得容易。

什么是 API？

API代表应用程序编程接口，它可以描述任何允许两个程序相互通信的东西。例如，诸如之类的方法document.insertNode实际上并不是 JavaScript 的一部分：它们是允许您的程序与 DOM 通信的 DOM API 的一部分。

Web API 允许您的代码以受控方式与网站和在线服务进行通信和交互。在大多数情况下，这是通过发送返回一些数据的请求来完成的，这些数据几乎总是采用 JSON 格式。然后可以在您的代码中使用此数据。

许多 API 还允许您将一些工作负载从您的应用程序卸载到外部服务。例如，如果您想翻译一份文档，您可以避免为此编写所有代码，而是使用 API。

API层

APILayer是一个精选的 API 市场。每个 API 都由 APILayer 的开发人员团队精心挑选，以确保其安全和稳定，并能够随着您网站的增长而扩展。所有 API 都有免费计划，您无需交出任何付款详细信息即可开始使用。APILayer 目前拥有近 100 个 API，并且还在不断添加。这些 API 涵盖了从金融到食品的一系列类别，并具有许多 Web 开发工具，例如图像处理和拼写检查。

每个 API 都有不同的支付等级，从免费开始到价格上涨取决于您将发出多少请求。一些付费计划也可能提供更多种类的数据来请求。APILayer 使您可以轻松注册您感兴趣的 API，并提供现场演示功能，让您可以直接在浏览器中测试 API 的工作原理，并提供一些示例代码以帮助您入门。它还具有针对每个 API 的完整文档和评论。

与 API 交互

通过 JavaScript 与 API 交互的最简单方法是使用fetch. 这从 URL 异步请求数据并返回允许我们访问返回数据的承诺。

让我们看一个简单的例子：

fetch("https://geek-jokes.sameerkumar.website/api?format=json")
  .then(response => response.json())
  .then(result => console.log(result.joke))
  .catch(error => console.log('error', error.message))

fetch("https://geek-jokes.sameerkumar.website/api?format=json")

.then(response => response.json())

.then(result => console.log(result.joke))

.catch(error => console.log('error', error.message))

此代码将从 Geek Jokes API 请求数据，该 API 返回 JSON 格式的随机笑话。我们将 API URL 传递给fetch函数。这将返回一个承诺，我们可以将then方法链接到它——首先，使用该json()方法将返回的 JSON 转换为 JavaScript 对象，然后joke将此对象的属性简单地记录到控制台。我们还在末尾添加一个 catch 块以记录任何错误。

获取请求接受第二个参数，您可以在其中指定请求的任何选项，包括标头。一组相当标准的选项如下所示：

const headers = new Headers()

const requestOptions = {
  method: 'GET',
  redirect: 'follow',
  headers
}

const headers = new Headers()

const requestOptions = {

method: 'GET',

redirect: 'follow',

headers

}

然后可以将这些添加到请求中：

fetch("https://geek-jokes.sameerkumar.website/api?format=json", requestOptions)
  .then(response => response.json())
  .then(result => console.log(result.joke))
  .catch(error => console.log('error', error.message))

fetch("https://geek-jokes.sameerkumar.website/api?format=json", requestOptions)

.then(response => response.json())

.then(result => console.log(result.joke))

.catch(error => console.log('error', error.message))

大多数服务都需要提供密钥才能授予对 API 的访问权限。这可以作为标头或 URL 的一部分包含在内。

隐藏您的 API 密钥非常重要。通常，它们应该在服务器上存储和加密。这是为了防止它们在源代码中可见并被其他人使用。当您向公司付费订阅时，这通常是一个更大的问题，因为公司不想免费提供对其代码的访问权限。

六个最好的

让我们来看看开发人员可以在 APILayer 上访问的六个最佳 API。请注意，对于下面的所有示例，您必须更改访问密钥（API 密钥）以匹配您自己的访问密钥。

Spotify API

Spotify API是 APILayer 上最大（也是最酷）的 API 之一。它允许您访问 Spotify 上提供的大量音乐和播客数据。

使用此 API，您可以获得专辑、专辑曲目、艺术家、艺术家专辑、播放列表、曲目和曲目歌词等数据。这意味着您可以搜索艺术家并接收有关他们所有已出版作品/专辑的信息，包括作品的发行时间以及作者和音乐家的姓名。

这是一个返回给定艺术家的所有专辑的示例：

const headers = new Headers()
headers.append("apikey", "YOUR_API_KEY")

const getAlbums = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers
  }
  fetch("https://api.apilayer.com/spotify/search?q=" + encodeURIComponent(event.target.artist.value), requestOptions)
    .then(response => response.json())
    .then(result => {document.getElementById("albums").innerHTML = result.albums.items.map(x => `<li>${x.data.name}</li>`).join``})
    .catch(error => console.log(error.message))
}

document.getElementById("music").addEventListener("submit", getAlbums)

const headers = new Headers()

headers.append("apikey", "YOUR_API_KEY")

const getAlbums = event => {

event.preventDefault()

const requestOptions = {

method: 'GET',

redirect: 'follow',

headers

}

fetch("https://api.apilayer.com/spotify/search?q=" + encodeURIComponent(event.target.artist.value), requestOptions)

.then(response => response.json())

.then(result => {document.getElementById("albums").innerHTML = result.albums.items.map(x => `<li>${x.data.name}</li>`).join``})

.catch(error => console.log(error.message))

}

document.getElementById("music").addEventListener("submit", getAlbums)

World News API

World News API让您可以访问来自世界各地的数千个新闻来源。结果来自各种新闻媒体，这意味着您可以从不同的角度获得相同的新闻报道。

API 还返回大量数据，包括每个新闻故事的标题、署名、作者和摘要，以及任何可用的图片。API 允许您按日期和地点搜索故事，这意味着您可以获得最新消息以及来自特定区域的历史故事。还可以在搜索中指定语言和原籍国。还有一个漂亮的 AI 功能，可以将故事分类为“正面”或“负面”，让您可以进一步策划返回的故事。

下面是一个返回今天排名前五的新闻故事的示例：

const headers = new Headers()
headers.append("apikey", "YOUR_API_KEY")

const requestOptions = {
  method: 'GET',
  redirect: 'follow',
  headers
}

const today = new Date()
const date = `${today.getFullYear()}-${today.getMonth()+1}-${String(today.getDate()).padStart(2,'0')}`

fetch(`https://api.apilayer.com/world_news/search-news?number=5&language=en&earliest-publish-date=${date}`, requestOptions)
  .then(response => response.json())
  .then(result => render(result))
  .catch(error => console.log('error', error))

const render = data => document.getElementById("news").innerHTML = data.news.map(story => `<h2>${story.title}</h2><img src=${story.image}/><section>${story.summary}</section>`).join``

const headers = new Headers()

headers.append("apikey", "YOUR_API_KEY")

const requestOptions = {

method: 'GET',

redirect: 'follow',

headers

}

const today = new Date()

const date = `${today.getFullYear()}-${today.getMonth()+1}-${String(today.getDate()).padStart(2,'0')}`

fetch(`https://api.apilayer.com/world_news/search-news?number=5&language=en&earliest-publish-date=${date}`, requestOptions)

.then(response => response.json())

.then(result => render(result))

.catch(error => console.log('error', error))

const render = data => document.getElementById("news").innerHTML = data.news.map(story => `<h2>${story.title}</h2><img src=${story.image}/><section>${story.summary}</section>`).join``

Weatherstack API

Weatherstack API允许您从世界任何地方访问任何给定位置的当前和历史天气统计数据。当前功能使您可以访问实时天气统计数据，例如温度、风向、压力和能见度。

这里要访问的数据量很大，尤其是2008年7月以来的历史天气特征，这意味着你可以获取2008年7月之后任何日期的任何地方的天气统计数据。地点和日期需要指定为参数。历史特征还有一个可选的“每小时”参数，可以设置为 1 或 0，具体取决于您是否希望天气数据按小时拆分。如果您选择按小时拆分数据，您还可以将可选参数“interval”设置为 1、3（默认）、6、12 或 24，具体取决于您希望如何拆分数据。

历史和当前特征都有一个可选的“单位”参数，您可以在其中将数据单位设置为公制的“m”、华氏的“f”或科学的“s”。

以下是返回给定位置当前温度的代码示例：

const getWeather = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
  }
    fetch("https://api.weatherstack.com/current?access_key=YOUR_API_KEY&query="+encodeURIComponent(event.target.city.value), requestOptions)
    .then(response => response.json())
    .then(result => document.getElementById("weather").innerHTML = `<h1>The current temperature in ${result.location.name} is ${result.current.temperature}℃</h1>`)
    .catch(error => console.log(error.message))
}

document.getElementById("place").addEventListener("submit", getWeather)

const getWeather = event => {

event.preventDefault()

const requestOptions = {

method: 'GET',

redirect: 'follow',

}

fetch("https://api.weatherstack.com/current?access_key=YOUR_API_KEY&query="+encodeURIComponent(event.target.city.value), requestOptions)

.then(response => response.json())

.then(result => document.getElementById("weather").innerHTML = `<h1>The current temperature in ${result.location.name} is ${result.current.temperature}℃</h1>`)

.catch(error => console.log(error.message))

}

document.getElementById("place").addEventListener("submit", getWeather)

号码验证API

号码验证 API允许您查找来自 200 多个国家/地区的电话号码并验证其真实性。API 还将返回有关国家、国家代码、移动运营商和线路类型（移动或固定电话）的详细信息。这将允许您实时验证网络应用程序用户提供的电话号码。

下面是一个示例，可让您在表单中输入电话号码。提交表格将返回号码是否有效。如果有效，它还会显示电话号码所在的国家/地区：

const headers = new Headers()
headers.append("apikey", "YOUR_API_KEY")

const verify = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers
  }
  fetch(`https://api.apilayer.com/number_verification/validate?number=${event.target.number.value}`, requestOptions)
  .then(response => response.json())
  .then(result => render(result))
  .catch(error => console.log('error', error.message))
}

document.getElementById("phone").addEventListener("submit",verify)

const render = data => document.getElementById("verification").textContent = data.valid ? `This is a valid phone number from ${data.country_name}` : `This is not a valid phone number`

const headers = new Headers()

headers.append("apikey", "YOUR_API_KEY")

const verify = event => {

event.preventDefault()

const requestOptions = {

method: 'GET',

redirect: 'follow',

headers

}

fetch(`https://api.apilayer.com/number_verification/validate?number=${event.target.number.value}`, requestOptions)

.then(response => response.json())

.then(result => render(result))

.catch(error => console.log('error', error.message))

}

document.getElementById("phone").addEventListener("submit",verify)

const render = data => document.getElementById("verification").textContent = data.valid ? `This is a valid phone number from ${data.country_name}` : `This is not a valid phone number`

Zenserp API

Zenserp API是一个 SERP（搜索引擎结果页面）API，允许您以更清晰的对象格式抓取搜索引擎结果页面。它的端点包括 Google、Image Reverse Search、YouTube、Bing 和 DuckDuckGo。Google 端点还包括图像、地图、视频、新闻和购物的子端点。结果还包括有助于您识别热门页面和趋势的排名信息。

还有一些 List Endpoints 可用于生成您自己的请求。其中包括：Google 语言、Google 国家/地区、地理位置和 Google 搜索引擎。

给定一个搜索项，API 将返回将出现的所有页面，包括其 URL 和描述。

下面是一个示例，它将返回 Google 对某个主题的热门搜索：

const headers = new Headers()

const serp = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers
  }
  fetch(`https://app.zenserp.com/api/v2/search?apikey=YOUR_API_KEY&q=${encodeURIComponent(event.target.q.value)}`, requestOptions)
  .then(response => response.json())
  .then(result => render(result))
  .catch(error => console.log('error', error.message))
}

document.getElementById("search").addEventListener("submit",serp)

const render = data => document.getElementById("result").innerHTML = `The top search result on Google is: <a href="${data.organic[0].url}"><h1>${data.organic[0].title}</h1></a><p>${data.organic[0].description}</p>`

const headers = new Headers()

const serp = event => {

event.preventDefault()

const requestOptions = {

method: 'GET',

redirect: 'follow',

headers

}

fetch(`https://app.zenserp.com/api/v2/search?apikey=YOUR_API_KEY&q=${encodeURIComponent(event.target.q.value)}`, requestOptions)

.then(response => response.json())

.then(result => render(result))

.catch(error => console.log('error', error.message))

}

document.getElementById("search").addEventListener("submit",serp)

const render = data => document.getElementById("result").innerHTML = `The top search result on Google is: <a href="${data.organic[0].url}"><h1>${data.organic[0].title}</h1></a><p>${data.organic[0].description}</p>`

Zenscrape

Zenscrape API是一个网络抓取 API，就其基本用法而言，它将返回任何给定网站的 HTML 内容。为此，您只需提供一个参数——目标网站的 URL——和 API 密钥。它还会从任何 JavaScript 或前端框架（如 React 或 Vue）在页面上生成任何动态 HTML。这意味着返回的 HTML 将与用户看到的内容相同。

起初，这可能看起来不像是您需要使用的东西。但是网络抓取——以及这个 API——对于交互和分析统计数据非常有用。例如，您可以使用此 API 创建一个应用程序来比较多个不同网站上的产品价格，并向用户显示为该产品提供最佳价值的购物网站。

该 API 还提供了一个 HTTP 代理接口。HTTP 代理是一种高性能的内容过滤器，可过滤所有 Web 流量，标记任何可能是病毒或侵入性和不需要的数据的可疑内容。该接口允许您使用任何已经依赖代理的应用程序，您只需使用 API 密钥作为用户名并包含通常作为密码提供的任何参数。

这还允许您指定特定的代理位置以获取返回的基于特定地理位置的内容。使用的代理也会自动轮换，以帮助保持抓取机器人的匿名性，并阻止网站限制您抓取它们的次数。

这是一个让您输入 URL 并将 HTML 返回到控制台的示例：

const headers = new Headers()

const scrape = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers
  }
  fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(`https://app.zenscrape.com/api/v1/get?apikey=YOUR_API_KEY&url=${encodeURIComponent(event.target.url.value)}`)}`,requestOptions)
  .then(response => response.json())
  .then(result => console.log(result.contents))
  .catch(error => console.log('error', error.message))
}

document.getElementById("scrape").addEventListener("submit",scrape)

const headers = new Headers()

const scrape = event => {

event.preventDefault()

const requestOptions = {

method: 'GET',

redirect: 'follow',

headers

}

fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(`https://app.zenscrape.com/api/v1/get?apikey=YOUR_API_KEY&url=${encodeURIComponent(event.target.url.value)}`)}`,requestOptions)

.then(response => response.json())

.then(result => console.log(result.contents))

.catch(error => console.log('error', error.message))

}

document.getElementById("scrape").addEventListener("submit",scrape)

总结

这六个示例仅涉及了 API Layer 所提供功能的皮毛。有更多可用的 API，因此请务必充分探索该站点并从中获得乐趣。

什么是 API？

API层

与 API 交互

六个最好的

Spotify API

World News API

Weatherstack API

号码验证API

Zenserp API

Zenscrape

总结

JavaScript中的三元运算符-极速阅读

了解Python正则表达式函数

JavaScript中的流控制：回调、promises、异步/等待

JavaScript中的回调是什么

适合初学者的13本书Node.js书籍

Maven构建前端资源

什么是 API？

API层

与 API 交互

六个最好的

Spotify API

World News API

Weatherstack API

号码验证API

Zenserp API

Zenscrape

总结

类似文章