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

本文旨在解决JavaScript中常见的API数据初始为undefined的问题，特别是当异步操作（如fetch请求）未完成时访问数据。我们将深入探讨async/await语法，解释其如何通过等待Promise解决异步数据流，并提供一个具体的Web表单与Bored API交互的案例，展示如何正确地获取并使用API返回的数据，避免因异步执行顺序导致的错误。

理解JavaScript中的异步性与undefined问题

在Web开发中，与外部API进行交互是常见需求。然而，这些网络请求是异步的。这意味着当你的代码发起一个API请求时，它不会停下来等待响应，而是会立即执行后续代码。如果后续代码尝试访问尚未从API返回的数据，就会出现undefined的情况。

考虑以下场景：一个用户通过表单提交了参数，你的JavaScript代码根据这些参数调用一个API（例如Bored API）来获取活动建议。你可能会遇到这样的问题：第一次或前几次尝试获取API数据时，控制台输出undefined，但之后却能正常工作。这通常是因为API请求还在进行中，而你却已经尝试访问其结果了。

示例代码中的问题分析：

让我们看一个简化后的代码片段，它展示了原始问题：

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); // 立即尝试访问数据
});

在这个例子中，当表单提交时，boredApiHandler()函数被调用，它是一个async函数，会发起一个fetch请求。然而，boredApiHandler()函数本身是异步执行的，它会立即返回一个Promise。而紧接着的console.log(FinalDate.activity)并不会等待boredApiHandler()完成并更新FinalDate。因此，在API响应到达并FinalDate被赋值之前，FinalDate仍然是其初始值[{}]，或者在某些情况下，如果API返回的是一个非数组对象，FinalDate.activity就会是undefined。

解决方案：利用async/await等待Promise

为了解决这个问题，我们需要确保在尝试使用API返回的数据之前，数据确实已经被获取并赋值。JavaScript提供了async/await语法来优雅地处理Promise，它允许我们以同步的方式编写异步代码。

核心概念：

• Promise: 表示一个异步操作的最终完成（或失败）及其结果值。
• async函数: 声明一个函数为异步函数。async函数总是返回一个Promise。
• await表达式: 只能在async函数内部使用。它会暂停async函数的执行，直到其后的Promise解决（resolved）并返回结果。如果Promise被拒绝（rejected），await表达式会抛出错误。

如何应用async/await：

我们需要在调用boredApiHandler()的地方，使用await关键字来等待其返回的Promise解决。这意味着触发API请求的事件监听器也需要被声明为async函数。

重构后的代码示例：

首先，确保你的HTML结构和元素选择器正确：

    

        
            For how much people the activity:
            
        
        
            Your price range:
            
        
        
            Submit
        
    

然后是重构后的JavaScript代码：

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 = `
            
${data.activity}
            
Type: ${data.type}
            
Participants: ${data.participants}
            
Price: ${data.price}
        `;
    }
}

代码解释：

1. form.addEventListener('submit', async (e) => { ... });: 最关键的改动是将表单提交事件的回调函数标记为async。这使得我们可以在其内部使用await。
2. const activity = await boredApiHandler(valueForPpl, valueForPriceRange);: 在这里，我们调用boredApiHandler并使用await。这意味着console.log以及任何后续处理activity数据的代码，都会暂停执行，直到boredApiHandler完成其异步操作并返回API响应。
3. boredApiHandler的改进:
   • 它现在接受participants和price作为参数，使得函数更加通用和可测试。
   • 它返回解析后的数据，而不是直接修改一个全局变量。这是一种更推荐的做法，因为它使得函数更加纯粹，其结果更可预测。
   • 增加了if (!mainData.ok)检查，用于处理HTTP请求本身失败的情况（例如404, 500错误），增强了健壮性。
   • 在catch块中，如果API请求或JSON解析失败，函数会返回null（或者你可以选择重新抛出错误），让调用者知道操作未能成功。
4. 数据访问: if (activity)检查确保只有在成功获取到数据时才尝试访问activity.activity，避免了在API返回null或错误时出现问题。

注意事项与最佳实践

1. 错误处理: 始终在async/await代码块中使用try...catch来捕获Promise被拒绝时可能抛出的错误，这对于网络请求尤其重要。
2. 加载状态: 在发起API请求时，考虑向用户显示一个加载指示器（例如旋转图标或禁用提交按钮），并在数据返回后移除它。这可以提升用户体验。
3. 数据流管理: 尽量让异步函数返回其结果，而不是直接修改全局变量。这样可以更好地控制数据流，并使代码更易于理解和测试。
4. 避免不必要的全局变量: 尽量限制全局变量的使用，将数据封装在更小的作用域或组件中。
5. 取消请求: 对于长时间运行的请求，考虑实现取消机制（使用AbortController），以防止用户在请求完成前离开页面或发起新请求时造成资源浪费或竞态条件。

总结

JavaScript中的异步编程是Web开发的核心挑战之一。通过理解Promise的工作原理，并熟练运用async/await语法，我们可以有效地管理异步操作，确保在数据可用时才进行访问，从而避免常见的undefined错误。正确地处理API请求不仅能使你的应用程序更加稳定，也能提供更流畅的用户体验。记住，await关键字是解决异步数据时序问题的关键所在。