clipboardItem.getType的.text()始终处于pending状态，如何获取已解析的URL内容？

哥们，我看你遇到的问题是读取剪贴板里的URL时，result.text()一直显示pending状态，但实际上这个Promise最终会resolved并返回需要的链接文本对吧？这是因为你没正确等待text()这个异步方法完成，下面给你捋清楚怎么改：

你的原始代码 #

const pasteBtn = document.getElementById("btn-paste");
pasteBtn.addEventListener('click', pasteFunc);
async function pasteFunc () {
    console.log('Attempting Paste');
    try {
        const pastetext = await navigator.clipboard.read();
        for (const item of pastetext) {
            if (!item.types.includes('text/uri-list')) {
                throw new Error('Could not see a link in the clipboard....');
            }
            await item.getType('text/uri-list').then((result) => {
                console.log ('2', result.text()) // --> { status: 'pending'} // but later --> { status: 'resolved', result: 'link text we need!'}
            });
        }
    } catch (error) {
        console.log('paste error', error);
    }
}

问题根源 #

item.getType('text/uri-list')返回的是一个Blob对象，而Blob.text()本身是一个异步方法，会返回一个新的Promise。你之前直接打印result.text()时，这个Promise还没完成，所以显示pending状态，需要等待它resolve才能拿到实际的文本内容。

修正后的代码 #

利用async函数的特性，用await直接等待所有异步操作完成，代码更清晰：

const pasteBtn = document.getElementById("btn-paste");
pasteBtn.addEventListener('click', pasteFunc);
async function pasteFunc () {
    console.log('Attempting Paste');
    try {
        const clipboardItems = await navigator.clipboard.read();
        for (const item of clipboardItems) {
            if (!item.types.includes('text/uri-list')) {
                throw new Error('Could not see a link in the clipboard....');
            }
            // 先获取Blob对象
            const uriBlob = await item.getType('text/uri-list');
            // 等待text()方法完成，拿到实际的链接文本
            const linkText = await uriBlob.text();
            console.log('成功获取链接:', linkText);
            // 这里就可以使用linkText进行后续的业务操作了
        }
    } catch (error) {
        console.log('paste error', error);
    }
}

另一种链式then写法（如果你偏好回调风格） #

如果不想用多层await，也可以用链式then来处理：

await item.getType('text/uri-list')
    .then(blob => blob.text())
    .then(linkText => {
        console.log('成功获取链接:', linkText);
        // 后续操作
    });

关键提醒 #

• 确保你的页面是在HTTPS环境下运行（本地开发的localhost也算），因为Clipboard API需要安全上下文才能工作
• 记得处理用户拒绝剪贴板权限的情况，你的catch块已经覆盖了这部分，这点做得不错～

内容的提问来源于stack exchange，提问作者TangoMike