promise不能在html中直接使用，因html是标记语言；须在script中用new promise()构造并传入executor函数，注意fetch需检查response.ok，async/await需配合try/catch处理错误。
Promise在HTML中根本不能直接使用
HTML 是标记语言，不执行 JavaScript 逻辑。你真正想问的是：在 HTML 页面里引入的 script 中，如何用 Promise 处理异步操作（比如加载资源、发请求、等待用户交互）。关键不是“HTML 中怎么用”，而是“在页面的 JS 环境里怎么正确构造和消费 Promise”。
new Promise() 构造函数必须传入 executor 函数
常见错误是漏掉参数、传错类型，导致 Promise 立即进入 rejected 状态或卡住不动：
-
new Promise()会直接抛出TypeError: Promise resolver undefined -
new Promise(null)或new Promise(42)同样报错 —— 必须是函数 - executor 函数接收两个参数：
resolve和reject，二者都必须被显式调用，否则 Promise 永远不会 settle
典型安全写法：
const loadScript = (src) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.onload = () => resolve(script);
script.onerror = () => reject(new Error(`Failed to load ${src}`));
document.head.appendChild(script);
});
};
fetch() 返回的 Promise 需要手动检查 status
fetch() 只在网络失败时 reject（如断网、DNS 错误），HTTP 状态码 404、500 仍会 resolve。这是最容易忽略的坑：
- 直接
.then(data => data.json())在 404 响应下会触发json() Promise rejected，但上层没 catch 就静默失败 - 必须先判断
response.ok或response.status >= 200 && response.status - 浏览器对跨域响应的
statusText可能为空，别依赖它做分支判断
推荐结构：
fetch('/api/data')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error('Request failed:', err));
async/await 不是语法糖替代品，而是控制流重构工具
用 async 函数包裹后，await 的值仍是 Promise，只是解包更自然；但它改变不了 Promise 链的本质行为：
-
await后面如果不是 Promise，会被自动包装成Promise.resolve(value) - 多个
await默认串行；想并发请用Promise.all([p1, p2])，而不是await p1; await p2; - 在事件监听器里用
async没问题，但不要忘了：错误必须用try/catch捕获，不能只靠.catch()
例如点击按钮加载两个资源：
button.addEventListener('click', async () => {
try {
const [users, posts] = await Promise.all([
fetch('/api/users').then(r => r.json()),
fetch('/api/posts').then(r => r.json())
]);
render(users, posts);
} catch (err) {
showError(err.message);
}
});
真正难的从来不是写 new Promise 或 await，而是决定在哪一层 reject、谁来处理错误、是否需要重试、怎样避免未处理的 rejection 警告 —— 这些得结合具体接口契约和 UI 反馈节奏来设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
