个人中心
gpt4 book ai didi

javascript - 是否在使用 API 组合参数时遇到困难？

转载 作者：行者123 更新时间：2023-12-03 01:45:14 25 4
gpt4 key购买 nike

从 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">&#169; <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/

25 4 0
文章推荐： javascript - 如何强制输入字段值验证？
文章推荐： ruby-on-rails - 带有Rails ajax的pushState
文章推荐： django - Django 中 STATICFILES_DIRS 的路径
文章推荐： javascript - 如何在reactjs组件之间不使用props的情况下传输数据？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com