在https://www.cnblogs.com/insus/p/22982421链接随笔中，Insus.NET有分享了一个判断文件是否存在的方法。
此本次，对那个方法进行另写，前一个方法，以array传作检测，如今改为直接传入单文件路径来判断。可以参考下面简单的代码，
const checkFileExist = async (url) => { try { const res = await fetch(url, { method: 'GET', headers: { Range: 'bytes=0-0' }, // 只要第一个字节 cache: 'no-store', }) return res.ok } catch { return false } };
View Code
如何调用？
const url = '/temp/' + item.ImageFileName;
if (!item.ImageFileName && await checkFileExist(url)) {
iframe.src = url;
} else {
//文档不存在或被删除。
}
或者，把判断分开写，
if (!item.ImageFileName) { return; } const url = '/temp/' + item.ImageFileName; const exists = await checkFileExist(url); if (exists) { iframe.src = url; } else { //文档不存在或被删除。 }
异步方法，在调用时，需要使用await不然得到的结果永远为true，因为Promise 是 truthy 的，所以这个条件永远为真。
借本篇篇辐，对“ 文档不存在或被删除。”进行重构，让其优雅一点。
还一点需要重构的，就是每张图片之间切换点击查看时，留在iframe的历史影像需要预先清除。
// 现成的"文档不存在"提示页 function showEmptyMessage(iframe, text = '文档不存在或被删除') { showInIframe(iframe, ` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body style="margin:0;height:100vh;display:flex;align-items:center;justify-content:center; color:#999;font-family:system-ui,-apple-system,sans-serif;background:#fafafa;"> ${text} </body> </html> `); }
View Code
写成html并嵌入其中。显示真实的text你是可以赋值的。
// 在 iframe 里显示提示文字 function showInIframe(iframe, html) { iframe.removeAttribute('src'); // 先清掉 src，避免它覆盖 srcdoc，清理遗留。 iframe.srcdoc = html; }
// 清空 iframe（比如切换文件或图片查看时） function clearIframe(iframe) { iframe.removeAttribute('srcdoc'); iframe.src = 'about:blank'; }
完整的onView事件，
const onView = async (item) => { const iframe = document.getElementById('frameContainer'); if (!iframe) return; loading.value = true; error.value = ''; try { // 1. 没有文件名，直接提示 if (!item.ImageFileName) { showEmptyMessage(iframe); //以前是没有文件名null时，直接return。现在显示上面写的showEmptyMessage(...)方法。 return; } const url = '/temp/' + item.ImageFileName; // 2. 探测文件是否存在 const exists = await checkFileExist(url); if (exists) { iframe.removeAttribute('srcdoc'); // 清掉上一次可能的 srcdoc iframe.src = url; } else { showEmptyMessage(iframe); } } catch (err) { error.value = '查看图片失败：' + err.message; showEmptyMessage(iframe, '加载失败：' + err.message); } finally { loading.value = false; } }
View Code
连续几篇，针对相同问题，几种方法，判断逻辑，呈现给用户内容。多样比，可以学习之或参考。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。