navigator.clipboard.readText()的一些坑

问题

为什么使用await navigator.clipboard.readText()就返回了reject的promise，但是直接使用navigator.clipboard.readText().then()就成功了进行读取。

// 情况1: await - 同步等待
async function testAwait() {
    // 这里可能已经离开了用户交互的上下文
    const text = await navigator.clipboard.readText(); // ❌ 可能失败
    return text;
}

// 情况2: .then() - 异步回调
function testThen() {
    // .then() 回调被放入微任务队列，执行时机不同
    navigator.clipboard.readText().then(text => {
        // 这个回调可能还在用户交互的"宽限期"内 ✅ 可能成功
        console.log(text);
    });
}

总结

根本原因在于：

1. await 会同步等待 - 可能等待时间过长，超出了浏览器认为的"用户交互上下文"
2. .then() 是异步回调 - 被放入微任务队列，通常还在用户交互的"宽限期"内执行
3. 浏览器安全策略 - 对剪贴板访问有严格的时机要求

最佳实践：在需要访问剪贴板的场景中，优先使用 .then() 而不是 await，以确保在用户交互的有效期内完成操作。