时间戳

首页 > 解决方案 > Node js - React：获取API请求不返回任何数据

javascript - Node js - React：获取API请求不返回任何数据

问题描述

我正在尝试fetch通过 API 请求获取研究船的一些信息。我正在尝试使用AIS Hub中的 API 。在遵循他们的文档并应用简单的请求后，例如：

http://data.aishub.net/ws.php?username=USERNAME&format=1&output=json&compress=1

我仍然无法获得任何数据作为回报。在我的终端上启动 a 后python -m SimpleHTTPServer 8000，我获得以下输出：

在 0.0.0.0 端口 8000 上提供 HTTP ...

127.0.0.1 - - [2020 年 1 月 24 日 12:16:16] “GET / HTTP/1.1” 200 -

127.0.0.1 - - [24/Jan/2020 12:16:16]“GET /boat.css HTTP/1.1”200 -

127.0.0.1 - - [2020 年 1 月 24 日 12:16:16]“GET /boat.js HTTP/1.1”200 -

我知道此时fetch可能无法正常工作。我也不确定我是否正确提出了请求。如果这里有用的话，那就是 Sample 选项卡，它显示了数据的结构。

在我正在使用的示例代码下方：

const btnSearch = document.getElementById('btnSearch');
const txtSearch = document.getElementById('boat');
const resultArea = document.getElementById('result');
let out = '';

btnSearch.onClick = function() {
    var searchTerm = txtSearch.value;
    const url = `http://data.aishub.net/ws.php?username=USERNAME&format=1&output=json&compress=3&latmin=20.5&latmax=30.8&lonmin=-15&lonmax=18.6=${searchTerm}`;
    console.log(url);
    fetch(url)
        .then(function(data) {
            console.log(data);
            return data.json();
        })
        .then(function(jsonObject) {
            console.log('Read This??????');
            console.log(jsonObject);
            for (boat in jsonObject) {
                const boatInfo = new Array(
                    jsonObject[boat].mmsi,
                    jsonObject[boat].time,
                    jsonObject[boat].longitude,
                    jsonObject[boat].latitude,
                    jsonObject[boat].cog,
                    jsonObject[boat].sog,
                    jsonObject[boat].heading,
                    jsonObject[boat].navsat,
                    jsonObject[boat].imo,
                    jsonObject[boat].name,
                    jsonObject[boat].callsign,
                    jsonObject[boat].type,
                    jsonObject[boat].a,
                    jsonObject[boat].b,
                    jsonObject[boat].c,
                    jsonObject[boat].d,
                    jsonObject[boat].draught,
                    jsonObject[boat].dest,
                    jsonObject[boat].eta
                );
                boatOut(boatInfo);
                console.log(boatInfo);
            }
            resultArea.innerHTML = out;
        })
        .catch(function(e) {
            console.log('Error' + e);
        });
};

function boatOut(boat) {
    console.log(boat);
    out += `<div class="boat">
            <div class="boatText">
            <h2>${boat[9]}</h2>
            <h3>${boat[1]}</h3>
            <p><em>${boat[8]}</em></p>
            </div><!-- boatText -->
            </div><!-- boat -->`;
}

到目前为止我做了什么：

我正在研究官方文档并尝试了列出的 API 的不同组合。我试图在网上寻找潜在的例子，但我找不到任何特别的东西。这个 API 的工作方式对我来说有点难以理解，因为它不同于其他应用程序（例如食谱、食物等）可以找到的通常类型。我的想法不多了，因为我不知道还有什么可以尝试的。谢谢，如果有人已经发现这种情况并且可以指出解决问题的正确方向。

标签： javascriptreactjs

解决方案

看起来有几个问题。该网址似乎格式不正确。我看到您正在使用您提供的“官方文档”链接中的测试网址。请从 url 的末尾删除模板文字。您的网址如下所示： const url = http://data.aishub.net/ws.php?username=USERNAME&format=1&output=json&compress=3&latmin=20.5&latmax=30.8&lonmin=-15&lonmax=18.6=${searchTerm}; 出于格式原因，我删除了反引号。删除模板文字后，您将不再需要反引号并可以切换到引号。现在您的 url 应该如下所示：const url = "http://data.aishub.net/ws.php?username=USERNAME&format=1&output=json&compress=3&latmin=20.5&latmax=30.8&lonmin=-15&lonmax=18.6"; 它基于您的 onclick 函数从未运行的评论显示。这是由于在 onclick 中使用了驼峰式大小写。你有： btnSearch.onClick = function() {。请将其更改为btnSearch.onclick = function() {注意 onClick 现在是 onclick。在 js 中使用 onclick 时必须全部小写。

推荐阅读