使用 Javascript 使用 api答案

【问题标题】：Consuming api using Javascript使用 Javascript 使用 api
【发布时间】：2020-08-05 01:22:44
【问题描述】：

我一直在努力在 HTML 页面上呈现 API 请求返回的数据对象，但是它一直在 HTML 页面上显示字符串对象。另一个问题是我无法在 Javascript 的 API 函数之外使用 API 请求返回的数据对象。请看下面的代码：

API请求，API函数外的console.log(data)不起作用

  var params = {
    // Request parameters
  };

  $.ajax({
    url:
      "https://failteireland.azure-api.net/opendata-api/v1/attractions?" +
      $.param(params),
    beforeSend: function (xhrObj) {
      // Request headers
      xhrObj.setRequestHeader(
        "Ocp-Apim-Subscription-Key",
        "ef4ed92186214c868a59d97c3b353661"
      );
    },
    type: "GET",
    // Request body
    data: "{body}",
  })
    .done(function (data) {
    
      console.log(data);

      
      document.getElementById("data").innerHTML = data.results;
    })
    .fail(function () {
      alert("error");
    });



});

console.log(data);

HTML 页面

<html>
  <head>
    <title>JSSample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <div id="data"></div>
  </body>
</html>

【问题讨论】：

永远不要发布真正的 API 密钥。并且不要一次问多个问题。
根据其名称data.results 将是“某物”的列表 -> 使用循环。
How do I return the response from an asynchronous call?
API 响应是一个对象数组，而不是 HTML。将其设置为 innerHTML 会强制将其转换为一个字符串，从而为您提供[object Object],[object Object],[object Object],...
不客气 :) （再次链接，以防它会在下面消失：jsfiddle.net/khrismuc/d1jragco）

标签： javascript html xmlhttprequest

【解决方案1】：

需要传入一个回调函数来处理返回的数据。

function do_request(cb, cb_fail) {
    var params = {};

  $.ajax({
    url:
      "https://failteireland.azure-api.net/opendata-api/v1/attractions?" +
      $.param(params),
    beforeSend: function (xhrObj) {
      // Request headers
      xhrObj.setRequestHeader(
        "Ocp-Apim-Subscription-Key",
        "ef4ed92186214c868a59d97c3b353661"
      );
    },
    type: "GET",
    // Request body
    data: "{body}",
  })
    .done(cb)
    .fail(cb_fail);
}

function cb(data) {
    // you now have access to the data here
    document.getElementById("data").innerHTML = JSON.stringify(data.results)

}

function cb_fail(error) {
    console.log(error)
}

do_request(cb, cb_fail)

【讨论】：

您刚刚重构了 OP 的代码，但没有解决这两个问题中的任何一个（输出 API 结果，访问异步操作的结果）
@ChrisG 回调函数可以访问 api 结果并正确处理来自异步操作的数据。
我知道；但是 OP 正在询问如何访问回调之外的数据。这是一个关于异步代码的常见初学者问题，没有一个好的答案，而您的答案实际上根本没有回答它，因为您仍在访问回调中的数据；您所做的就是将其移至外部函数。听起来你必须这样做，这也是错误的。
@ChrisG "$.ajax" 返回什么？除了传入成功/错误函数之外，您建议如何处理响应？没有什么“必须”做任何事情，但通常有一些普遍接受的实现。
主要问题：必须通过循环处理响应数组并根据元素创建列表项或 div 或其他任何内容。 OP 的第二个问题是关于如何在$.ajax 回调之外使用 API 结果（无论它们是如何实现的，这完全是题外话，但你的答案唯一要处理的问题）就是这样回答的linked question