10. 异步请求：Promise、async/await 与请求状态

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

三、知识点提醒

真实项目里把 `fakeFetchProducts` 换成 `fetch(url)` 即可。
`try/catch` 可以捕获 `await` 过程中的错误。
页面至少应该考虑 loading、成功、失败、空数据四种状态。

四、练习建议

增加“重试一次”按钮。
把数据渲染成卡片，而不是纯文本。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/10-async-fetch.js，下面同步展示，方便学习和复制。

// 页面 10：Promise、async/await、请求状态管理
const asyncOutput = document.querySelector('#p10-output');
const successBtn = document.querySelector('#p10-success');
const failBtn = document.querySelector('#p10-fail');

function fakeFetchProducts(shouldFail = false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldFail) {
        reject(new Error('网络异常，请稍后重试'));
        return;
      }

      resolve([
        { id: 1, name: 'Decking', price: 58 },
        { id: 2, name: 'Wall Panel', price: 79 },
        { id: 3, name: 'Fencing', price: 66 }
      ]);
    }, 800);
  });
}

async function loadProducts(shouldFail) {
  asyncOutput.textContent = 'Loading... 正在请求数据';

  try {
    const products = await fakeFetchProducts(shouldFail);
    asyncOutput.textContent = products
      .map((item) => `${item.id}. ${item.name} - $${item.price}`)
      .join('\n');
  } catch (error) {
    asyncOutput.textContent = `请求失败：${error.message}`;
  } finally {
    console.log('请求流程结束，无论成功失败都会执行 finally');
  }
}

successBtn.addEventListener('click', () => loadProducts(false));
failBtn.addEventListener('click', () => loadProducts(true));