如何使用 XMLHttpRequest 在 QML 中正确设置 API 调用答案

【问题标题】：How to properly set an API call in QML using XMLHttpRequest如何使用 XMLHttpRequest 在 QML 中正确设置 API 调用
【发布时间】：2020-10-12 20:04:14
【问题描述】：

我正在构建一个小型天气 API 作为练习，以使用 QML 并使用 OpenWeather 正确操作 API 调用，您可以在那里看到典型的 API 响应。

问题我无法让 API 调用正常工作。在为您在下面看到的一些城市设置了一个最小示例之后，它应该在城市旁边出现天气的象征，但它没有发生。图标列表可以在here 找到。为了完整起见，MVE 的源代码可以在here 找到。

来自编译器的错误：qrc:/main.qml:282: SyntaxError: JSON.parse: Parse error

这是正在发生的事情

这是预期的

典型的 API JSON 响应可以在 here 及以下找到：

{
  "coord": {
    "lon": -122.08,
    "lat": 37.39
  },
  "weather": [
    {
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 282.55,
    "feels_like": 281.86,
    "temp_min": 280.37,
    "temp_max": 284.26,
    "pressure": 1023,
    "humidity": 100
  },
  "visibility": 16093,
  "wind": {
    "speed": 1.5,
    "deg": 350
  },
  "clouds": {
    "all": 1
  },
  "dt": 1560350645,
  "sys": {
    "type": 1,
    "id": 5122,
    "message": 0.0139,
    "country": "US",
    "sunrise": 1560343627,
    "sunset": 1560396563
  },
  "timezone": -25200,
  "id": 420006353,
  "name": "Mountain View",
  "cod": 200
}

下面是与 API 调用相关的一段代码：

main.qml

// Create the API getcondition to get JSON data of weather
function getCondition(location, index) {
    var res
    var url = "api.openweathermap.org/data/2.5/weather?id={city id}&appid={your api key}"
    var doc = new XMLHttpRequest()
    // parse JSON data and put code result into codeList
    doc.onreadystatechange = function() {
        if(doc.readyState === XMLHttpRequest.DONE) {
            res = doc.responseText
            // parse data
            var obj = JSON.parse(res)  // <-- Error Here
            if(typeof(obj) == 'object') {
                if(obj.hasOwnProperty('query')) {
                    var ch = onj.query.results.channel
                    var item = ch.item
                    codeList[index] = item.condition["code"]
                }
            }
        }
    }
    doc.open('GET', url, true)
    doc.send()
}

为了解决这个问题，我查阅了几个来源，首先：official documentation 和相关函数。我相信它设置正确，但我添加了完整性参考。我还遇到了this one，它解释了如何简单地应用XMLHttpRequest。此外，我对问题进行了更多研究以找到解决方案，并咨询了this one，其中还解释了如何应用JSON 解析功能。但还是有些不对劲。

感谢您指出解决此问题的正确方向。

【问题讨论】：

没有人会下载源代码、安装图标和其他任何东西。您必须提供minimal reproducible example。如果无法访问您从中获取 JSON 的站点，请提供响应 (doc.responseText)。至于问题 - 错误很清楚，您收到的 JSON 不正确，仅此而已
@folibis，感谢您的光临并阅读问题，非常感谢您抽出宝贵的时间。该代码是公开的，任何想尝试的人都可以下载和测试。源代码足够小：是一个带有按钮的窗口。我亲自下载了源代码并提供了answers供其他用户尝试帮助。我在下面找到并发布了我的问题的解决方案，希望对其他人有用。

标签： c++ json qt xmlhttprequest qml

【解决方案1】：

在您的代码中，您的网址显示为："api.openweathermap.org/data/2.5/weather?id={city id}&appid={your api key}"。您需要将{city id} 和{your api key} 替换为实际值。

您可以通过在请求 URL 中提供实际城市 ID 和 API 密钥来解决此问题

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review
啊，谢谢你的链接。原谅我太天真了。我在其中一个上读到，说“我不确定你的问题的原因是什么，但如果是 X，你可以通过做 Y 来解决它”。因此，如果我将其写为：“我不确定您是否从服务器收到错误，但如果是这样，您可以通过在请求中提供实际的城市 ID 和 API 密钥来解决它网址”。
您明确表示“我没有添加评论的声誉积分”这一事实是一个严重的危险信号，即答案不应该是答案，并导致我自动发布评论。我个人的观点是，这里描述的东西非常琐碎，实际上不太可能是问题（当然用户不会公开发布他们的 API 密钥），所以最好作为评论（比如“你记得如果需要提及，请将 {city id} 和 {your api key} 替换为实际值？”）。
@JarMan，非常感谢您停下来阅读问题并尝试回答。非常感谢您的时间和精力。 {city id} 和 {your api key} 是我插入的声明，目的是不共享真正的密钥，但这不是错误。我昨天下午找到了一个解决方案，我很快就会发布它，以便其他用户可以从这个问题中受益。

【解决方案2】：

在我的问题的答案下方。我没有正确读取JSON 文件，在控制台记录问题后，解决方案如下。代码从一开始就是正确的，只需要正确审查响应并且非常详细的是 JSON 响应有点混乱：

function getCondition() {
    var request = new XMLHttpRequest()
    request.open('GET', 'http://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=key', true);
    request.onreadystatechange = function() {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status && request.status === 200) {
                console.log("response", request.responseText)
                var result = JSON.parse(request.responseText)
            } else {
                console.log("HTTP:", request.status, request.statusText)
            }
        }
    }
    request.send()
}

希望有帮助！

【讨论】：