掌握JavaScript异步编程：解决API数据初始undefined问题

let FinalDate = [{}]; // 存储API结果的变量

const boredApiHandler = async () => {
  try {
    const mainData = await fetch(
      `http://www.boredapi.com/api/activity/?participants=${valueForPpl}&price=${valueForPriceRange}`
    );
    const parsedData = await mainData.json();
    return (FinalDate = parsedData); // 更新FinalDate
  } catch (error) {
    console.error("Error fetching activity:", error);
  }
};

form.addEventListener(`submit`, (e) => {
  e.preventDefault();
  boredApiHandler(); // 发起异步请求
  console.log(FinalDate.activity); // 立即尝试访问数据
});

<!-- HTML 结构 -->
<section>
    <form action="" class="form__wrapper">
        <div class="participants__wrapper">
            <label id="participants__label" for="participants">For how much people the activity:</label>
            <input type="number" id="participants" name="participants">
        </div>
        <div>
            <label for="price-range" id="price-range__label">Your price range:</label>
            <input type="range" name="price-range" id="price-range" min="0" max="1" step="0.1">
        </div>
        <div>
            <button type="submit" id="sumbuit__button">Submit</button>
        </div>
    </form>
</section>

const howMuchPll = document.querySelector(`#participants`);
const priceRange = document.querySelector(`#price-range`);
const btn = document.querySelector(`#sumbuit__button`);
const form = document.querySelector(`form`);

let valueForPpl = "";
let valueForPriceRange = "";
// FinalDate 应该在每次请求时更新，而不是作为全局变量被直接赋值
// 更好的做法是让 boredApiHandler 返回数据，而不是直接修改全局变量
// 或者，如果必须是全局变量，确保访问时已更新
let currentActivityData = null; // 初始化为null，表示尚未获取数据

const boredApiHandler = async (participants, price) => {
  try {
    const mainData = await fetch(
      `http://www.boredapi.com/api/activity/?participants=${participants}&price=${price}`
    );
    // 检查HTTP响应是否成功
    if (!mainData.ok) {
      throw new Error(`HTTP error! status: ${mainData.status}`);
    }
    const parsedData = await mainData.json();
    return parsedData; // 返回解析后的数据
  } catch (error) {
    console.error("Error fetching activity:", error);
    return null; // 发生错误时返回null或抛出错误
  }
};

const howMuchPllHandler = (e) => {
  valueForPpl = e.target.value;
};

const priceRangeHandler = (e) => {
  valueForPriceRange = e.target.value;
};

howMuchPll.addEventListener(`change`, howMuchPllHandler);
priceRange.addEventListener(`change`, priceRangeHandler);

form.addEventListener(`submit`, async (e) => { // 将事件监听器回调函数声明为 async
  e.preventDefault();

  // 调用 boredApiHandler 并等待其结果
  const activity = await boredApiHandler(valueForPpl, valueForPriceRange);

  if (activity) {
    currentActivityData = activity; // 更新全局变量
    console.log("Fetched Activity:", currentActivityData.activity);
    // 在这里可以进一步处理和显示 activity 数据
    // 例如：displayActivity(currentActivityData);
  } else {
    console.log("Failed to fetch activity or no activity found.");
  }
});

// 辅助函数（可选）：展示活动数据
function displayActivity(data) {
    // 假设你有一个 div 来显示活动
    const activityDisplayDiv = document.getElementById('activity-display');
    if (activityDisplayDiv) {
        activityDisplayDiv.innerHTML = `
            <h3>${data.activity}</h3>
            <p>Type: ${data.type}</p>
            <p>Participants: ${data.participants}</p>
            <p>Price: ${data.price}</p>
        `;
    }
}