Javascript 异步等待函数未在事件侦听器中执行_Javascript_Ecmascript 6_Async Await_Es6 Promise_Addeventlistener

Javascript 异步等待函数未在事件侦听器中执行

javascript ecmascript-6

Javascript 异步等待函数未在事件侦听器中执行,javascript,ecmascript-6,async-await,es6-promise,addeventlistener,Javascript,Ecmascript 6,Async Await,Es6 Promise,Addeventlistener,我试图调用Trip Advisor API，并使用异步/等待函数返回一些数据 async/await函数在名为req.js的文件中定义，代码如下： const findRest = async (reviews, closed) => { const respond = await fetch( "https://tripadvisor1.p.rapidapi.com/restaurants/list-by-latlng?limit=30&currency=EUR&am

我试图调用Trip Advisor API，并使用异步/等待函数返回一些数据

async/await函数在名为req.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": "x-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");
  }
};

document.getElementById("subButton").addEventListener("click", function(e) {
  const userReviews = parseInt(document.querySelector(".userRev").value);
  const userClose = document.querySelector(".userClose").value;

  e.preventDefault();
  console.log("click");
  console.log(e.target.id);

  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));
});

然后，当事件侦听器通过单击小表单中的按钮激发时，调用此函数。此代码位于名为app.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": "x-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");
  }
};

document.getElementById("subButton").addEventListener("click", function(e) {
  const userReviews = parseInt(document.querySelector(".userRev").value);
  const userClose = document.querySelector(".userClose").value;

  e.preventDefault();
  console.log("click");
  console.log(e.target.id);

  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供参考：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>API Tester</title>
    <meta name="author" content="Phil My Glass" />
    <meta
      name="description"
      content="An app to help me practice my API calling"
    />
  </head>
  <body>
    <header>
      <h1>What Restaurant?</h1>
    </header>
    <main>
      <form id="form">
        <input id="userRev" class="userRev" /><br />
        <input id="userClose" class="userClose" />
        <button id="subButton" 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>


API测试仪
什么餐馆？


找到！

当我在app.js文件内但在事件侦听器外运行findRest函数并将参数作为静态数据传入时，它只执行find并将所有请求的数据打印到控制台。只要我尝试在事件侦听器中运行它，什么都不会发生。没有返回的数据打印，没有错误，这让我很难受

正如我所说，它在事件侦听器之外工作得很好，但我尝试将forEach更改为map，但仍然没有返回任何内容。有人能帮忙吗

答复从评论和您的回复来看：什么都没有发生的原因是因为数据是一个空数组。

Array.forEach（回调）

仅在数组包含元素时执行回调

它可能为空的原因是

restaurant.is_closed

的筛选器可能需要一个布尔值，而您传入一个字符串（输入元素的值是一个字符串）

最好使用复选框查看是否已选中。否则，您必须查看字符串输入是否与“true”或“false”匹配

代码本身

findRest

包含不必要的等待。你应该把它定义为

async function findRest(reviews, closed) {
  const response = 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": "x-rapidapi-key"
      }
    }
  );

  if (response.status === 200) {
    // The only async call is casting the response to a JavaScript object
    const json = await response.json();
    console.log(json);
    const data = json.data;
    // Filtering the array is not async
    return data.filter((restaurant) => {
      // Adding some additional debugs to prove my hypothesis right
      const hasEnoughReviews = restaurant.num_review >= reviews;
      const isClosed = restaurant.is_closed === closed;
      console.log(`review debug: ${typeof restaurant.num_review}, ${typeof reviews} -> output: ${hasEnoughReviews}`);
      console.log(`closed debug: ${typeof restaurant.is_closed}, ${typeof closed} -> output: ${isClosed}`)
      return hasEnoughReviews && isClosed

    })
  } else {
    throw new Error("Could not provide results within specified parameters");
  }
}

您还可以在eventListener回调中使用async/await，创建更干净的代码

document.getElementById("subButton").addEventListener("click", async (e) => {
  const userReviews = parseInt(document.querySelector(".userRev").value);
  // Judging by the filter in the findRest, this should be a boolean?
  const userClose = document.querySelector(".userClose").value;

  e.preventDefault();
  console.log("click");
  console.log(e.target.id);

  try {
    const restaurants = await findRest(userReviews, userClose);
    // I think your issue is that restaurants is an empty array
    console.log(restaurants)
    restaurants.forEach(restaurant => {
      console.log(`${restaurant.name} matches your search criterea and is located at ${restaurant.address}
        To make a booking, please call ${restaurant.phone}`)
    })
  } catch (err) {
    console.log(err)
  }
});

对我来说似乎很好。我已经创建了一个复制问题。但是它抛出了问题（没有API密钥），因此承诺被拒绝，它记录了错误“无法在指定参数内提供结果”。它抛出了错误，因为没有API密钥，但只要我将API密钥插入代码中，就会发生同样的事，控制台不会返回任何结果。API是否返回了什么？将调试器置于

let data=wait respond.json（）上

在

findRest

函数中，看看这些东西是否真的会给你一个结果。我刚刚在控制台中运行了代码，似乎const userClose有问题。这似乎出于某种原因使代码无法运行，并且不会返回任何不可能的结果。当我在没有API键的情况下测试它时，会显示错误，因此获取值时不会出现问题。函数的输出是什么？您能否通过

const data=await findRest（userReviews，userClose）提供它；控制台日志（数据）

或

findRest（userReviews，userClose）。然后（（数据）=>console.log（数据））

，因为您不使用async/await