为什么我的提取请求不在事件侦听器回调函数内执行？

Question

刚刚掌握 API 调用和获取的窍门，并将以下代码放在一起，以从 Trip Advisor API 获取一些信息，并使用此信息将消息记录到控制台。

当我调用 fetch 请求函数时，它会很好地记录到控制台，但是一旦我将它包装在事件侦听器回调中，它就不再执行，这是为什么？

感谢任何帮助！

//This is the fetch function kept in a file names request.js

const findRest = async (reviews, closed) => {
  const respond = await fetch(
    "https://tripadvisor1.p.rapidapi.com/restaurants/list-by-latlng?limit=30&currency=EUR&distance=2&lunit=km&lang=en_US&latitude=53.3498&longitude=-6.2603",
    {
      method: "GET",
      headers: {
        "x-rapidapi-host": "tripadvisor1.p.rapidapi.com",
        "x-rapidapi-key": /* my rapidapi key */
      }
    }
  );

  if (respond.status === 200) {
    let data = await respond.json();
    let newData = await data.data;

    let data1 = await newData.filter(
      review => parseInt(review.num_reviews) >= reviews
    );
    let data2 = await data1.filter(close => close.is_closed == closed);
    return data2;
  } else {
    throw new Error("Could not provide results within specified parameters");
  }
};

//This is the event listener kept in a file names app.js - both files are active and no problems communicating with each other

document.querySelector(".subButton").addEventListener("click", e => {
  e.preventDefault();
  console.log("click");
  const userReviews = parseInt(document.querySelector(".userRev").value);
  const userClose = document.querySelector(".userClose").value;

  findRest(userReviews, userClose)
    .then(data => {
      data.forEach(element => {
        console.log(
          `${element.name} matches your search criterea and is located at ${element.address}
        To make a booking, please call ${element.phone}`
        );
      });
    })
    .catch(err => {
      console.log(err);
    });
});

//HTML below

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>What Wine?</title>
    <meta name="author" content="Phil My Glass" />
    <meta
      name="description"
      content="An app to help you find the wine you like or something new based on your preferences"
    />
    <meta name="keywords" content="wine" />
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <header>
      <h1>What Restaurant?</h1>
    </header>
    <main>
      <form>
        <input class="userRev" /><br />
        <input class="userClose" />
        <button class="subButton" type="submit">Find!</button>
      </form>
    </main>
  </body>
  <script src="req.js" type="text/Javascript"></script>
  <script src="app.js" type="text/Javascript"></script>
</html>

Answer 1

这两行看起来可以断线：

  const userReviews = parseInt(document.querySelector(".userRev").value);
  const userClose = document.querySelector(".userClose").value;

如果document.querySelector(".userRev") 、 document.querySelector(".userClose")为空，则将是未捕获的 TypeError。

使用 HTML 肯定会知道。

为什么我的提取请求不在事件侦听器回调函数内执行？

问题描述

1 个解决方案

解决方案1
0 2019-12-13 11:20:10

为什么我的提取请求不在事件侦听器回调函数内执行？

问题描述

1 个解决方案

解决方案1 0 2019-12-13 11:20:10

解决方案1
0 2019-12-13 11:20:10