从 https://jsfiddle.net/nn2qmc7t/ 第 63 行到第 83 行我在 javascript 中使用 API 时遇到问题，我认为是参数的合并。我正在尝试通过 API 输入，该 API 与此处的文档不友好，我也无法从该网站获得支持:https://newsapi.org/docs基本上我在这里做错了什么以及如何使第 69 行到 75 行的所有参数都起作用？
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- JavaScript that needs to be loaded first -->
<script src="js/moment.min.js"> </script>
<title>feed.football - Quick and easy football news and tables!</title>
</head>
<body class="bodyClass">
<!-- Navbar begin: -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #efefff;">
<a class="navbar-brand" href="index.html">feed.football</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon-custom"><i class="fal fa-futbol fa-1x"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html"><i class="fal fa-newspaper fa-1x"></i> News <span class="sr-only">(current)</span></a> <!-- Main news will always be the home page / feed -->
</li>
<li class="nav-item">
<a class="nav-link" href="tables.html"><i class="fal fa-table fa-1x"></i> Tables</a> <!-- Football tables include results -->
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html"><i class="fal fa-envelope fa-1x"></i> Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar end. -->
<!-- Main content begin: -->
<div class="text-center">
<h2>Coming Soon!</h2>
<p>Quick and easy football news and tables!</p>
</div>
<!-- Get news data begin: -->
<script>
var todaysDate = moment(todaysDate).format('YYYY-MM-DD');
console.log("Todays date is: " + todaysDate);
var url = 'https://newsapi.org/v2/top-headlines?' +
'category=sport' +
'country=uk&' +
'q=football&soccer' +
'from='+todaysDate+'&sortBy=popularity?'
'sort by relevance&'
'apiKey=6b6384493350490abac2f85fb6f584e2';
var req = new Request(url);
fetch(req)
.then(function(response) {
console.log(response.json());
})
</script>
<!-- Get news data end. -->
<!-- Parse news data to HTML begin: -->
<!-- Parse news data to HTML end. -->
<!-- Main content end. -->
<!-- Footer begin: -->
<footer>
<hr></hr>
<div class="text-center">
<em><p><a target="_blank" href="http://NewsAPI.org">News powered by NewsAPI.org</a></p></em>
<em><p><a target="_blank" href="http://jamie.zone">© <script>document.write(moment(todaysDate).format('YYYY'));</script> - Jamie Cropley</a></p></em>
</div>
</footer>
<!-- Footer end. -->
<!-- Optional JavaScript -->
<script defer src="https://pro.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-d84LGg2pm9KhR4mCAs3N29GQ4OYNy+K+FBHX8WhimHpPm86c839++MDABegrZ3gn" crossorigin="anonymous"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
最佳答案
当将大量参数组合到 URL 查询字符串中时，最好使用函数，否则很容易出错:
function querystring() {
return Object.keys(params).map(function(k) {
return encodeURIComponent(k) + '=' +
encodeURIComponent(params[k]);
}).join('&');
}
并像这样创建 URL:var url = 'https://newsapi.org/v2/top-headlines?' + querystring({category:'sport',country:'uk',q:'football&soccer',from:todaysDate,sortBy:'popularity'...等等
这是另一个错误:
.then(function(response) {
console.log(response.json());
})
response.json() 实际上是一个用解析的 JSON 数据解析的 promise ，因此您也需要等待它。
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
})
关于javascript - 是否在使用 API 组合参数时遇到困难？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50669440/