📜  如何连接到 JavaScript 中的 API?

📅  最后修改于: 2022-05-13 01:56:18.647000             🧑  作者: Mango

如何连接到 JavaScript 中的 API?

API或应用程序编程接口是在通道端点之间传输请求/响应数据的中介。我们可以将 API 类比为餐厅服务员。餐厅的典型服务员会欢迎您并要求您点菜。他/她确认相同并携带此消息并将其发布到订单队列/厨房。一旦你的饭菜准备好了,他/她也会从厨房把它取回你的餐桌。因此,在典型场景中,当客户端端点向资源服务器端点请求资源时,该请求通过 API 传送到服务器。符合特定模式规范的 API 携带各种相关信息,例如OpenAPIGraphQL等提供的信息。这些信息可能包括端点 URL、操作(GET、POST、PUT 等)、身份验证方法、令牌、许可证和其他操作参数。 API 通常遵循JSONXML格式作为其交换请求/响应的关键模式,而有些也遵循YAML格式。

大多数情况下,资源服务器生成的响应是 JSON 模式,其中包含在另一个端点请求的资源的状态信息。因此,这些 API 被命名为REST API ,其中REST代表RE表示状态传输。资源的状态可能会受到 API 操作的影响。还应该注意的是,操作系统也使用系统 API 来访问内核功能。一个常见的例子包括Win32 API,它是一个 Windows 平台 API,充当系统级操作的桥梁,例如文件/文件夹选择、按钮样式等。大多数具有 GUI 库的编程语言都包装在这一层上。

API(Google Geolocation API)的示例请求

{
    "homeMobileCountryCode": 310,
    "homeMobileNetworkCode": 311,
    "radioType": "gsm",
    "carrier": "airtel",
    "considerIp": "true",
    "cellTowers": [
        {
            "cellId": 22,
            "locationAreaCode": 115,
            "mobileCountryCode": 310,
            "mobileNetworkCode": 311,
            "age": 0,
            "signalStrength": -40,
            "timingAdvance": 12
          }
    ],
    "wifiAccessPoints": [
        {
        "macAddress": "00:25:9e:ff:jc:wc",
        "signalStrength": -33,
        "age": 0,
        "channel": 12,
        "signalToNoiseRatio": 0
        }
    ]
  }

示例响应:

{
    "location": {
      "lat": 41.1,
      "lng": -0.1
    },
    "accuracy": 1200.2
  }

API 的架构、使用定价等取决于提供 API 的组织。有免费可用的 API,例如 PageCDN API,以及按需付费的基于定价模型的 API,例如 Street View Static API。 API 使客户/程序员能够使用组织的基础设施和云服务来访问 Internet 上的各种资源。 API 通常需要一个API 密钥(唯一)以及一些可选的凭据,以验证客户端发出的资源请求。 Web 程序员经常依赖 API 来实现各种很棒的技巧,例如通过 twitter API 在他们的主页上显示过滤的推文,通过 HTML2PDF API 将 HTML 转换为 pdf 等。对于理科学生和爱好者,各种 API,如 NASA API(Exoplanet、Insight等)按需提供内容。移动应用程序开发人员也大量使用 API,例如天气 API、地理位置、Google Analytics API 等。

使用 JavaScript 连接到 API:


要使用 JavaScript 进行 API 调用,可以在
google.load('visualization', '1', 
            {
              'packages':['corechart', 'table', 'geomap']
            }
    );
      
    google.setOnLoadCallback(drawGID);
      
        function drawGID() {
          //var queryString = encodeURIComponent('SELECT A, B LIMIT 5');
      var query = 
new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/spreadsheetId/gviz/tq?range=');
      query.send(handleQueryResponse);
    }
    var resp;
    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() +
            ' ' + response.getDetailedMessage());
        return;
      }
  
      var data = response.getDataTable();
      resp = response;
      var chart =
 new google.visualization.LineChart(
      document.getElementById('any_div_or_container'));
      chart.draw(data, { height: 400, curveType: 'function',
          legend: { position: 'bottom' }});
    }

上面的代码包含一个在加载窗口时触发的回调函数。将包含电子表格 ID 和其他参数的查询字符串传递给服务器。此处的电子表格ID 需要替换为相关电子表格的电子表格 ID。 'any_div_or_container'字符串将替换为我们希望在页面中显示结果的 DOM 元素。响应处理程序分析响应并检查内容类型,然后将其解析为数据以产生所需的输出。上面的代码使用生成 JSON 响应的示例电子表格运行,如下所示:

gvjs_rl {wva: "0.6", qX: "ok", hv: Array(0), Sw: Array(0), O2: "1651350667", …}
wva: "0.6"
qX: "ok"
hv: []
Sw: []
O2: "1651350667"
R: gvjs_L
$p: null
Ff: Array(2)
0: {id: "A", label: "", type: "datetime", pattern: "M/d/yyyy H:mm:ss", p: {…}}
1: {id: "B", label: "", type: "number", pattern: "General"}
length: 2
__proto__: Array(0)
eg: (98) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, ...]
Fr: null
cache: []
version: "0.6"
__proto__: gvjs_$k
__proto__: Object

示例折线图的输出屏幕截图: