異步等待函數未在事件偵聽器中執行

Question

我正在嘗試調用 Trip Advisor API 並使用 async/await 函數返回一些數據。

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

當事件偵聽器通過單擊小表單中的按鈕觸發時，將調用此方法。 此代碼位於名為 app.js 的文件中，如下所示：

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>

當我在 app.js 文件中運行 findRest 函數時，但在事件偵聽器之外並作為靜態數據傳入參數時，它執行查找並將所有請求的數據打印到控制台。 一旦我嘗試在事件偵聽器中運行它，就沒有任何反應。 沒有返回的數據打印，沒有錯誤，這讓我很生氣。

就像我說的，它在事件偵聽器之外工作正常，但我嘗試將 forEach 更改為 map 並且仍然沒有返回任何內容。 有人可以幫忙嗎！

Answer 1

回答

從評論和您的回復來看：沒有發生任何事情的原因是因為數據是一個空數組。 Array.forEach(callback)僅在數組包含元素時執行回調。

它可能為空的原因是restaurant.is_closed的過濾器可能需要一個布爾值，而您傳入一個字符串（輸入元素的值是一個字符串）。

最好使用復選框來查看它是否被選中。 否則，您必須查看字符串輸入是否與“真”或“假”匹配。

代碼本身

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

異步等待函數未在事件偵聽器中執行

問題描述

1 個解決方案

解決方案1
2 已采納 2019-12-18 12:20:12

回答

代碼本身

異步等待函數未在事件偵聽器中執行

問題描述

1 個解決方案

解決方案1 2 已采納 2019-12-18 12:20:12

回答

代碼本身

解決方案1
2 已采納 2019-12-18 12:20:12