首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS fetch检查文件是否存在而不下载内容

JS fetch是一种用于发送HTTP请求的现代浏览器API。它可以用于检查文件是否存在而不下载文件内容。具体实现方法如下:

  1. 使用fetch函数发送HEAD请求,而不是常见的GET请求。HEAD请求只返回响应头信息,而不返回实际的文件内容。
代码语言:txt
复制
fetch(url, { method: 'HEAD' })
  .then(response => {
    if (response.ok) {
      console.log('文件存在');
    } else {
      console.log('文件不存在');
    }
  })
  .catch(error => {
    console.log('请求出错', error);
  });
  1. 在响应返回后,通过检查状态码来判断文件是否存在。常见的状态码有200表示文件存在,404表示文件不存在。
代码语言:txt
复制
fetch(url, { method: 'HEAD' })
  .then(response => {
    if (response.status === 200) {
      console.log('文件存在');
    } else if (response.status === 404) {
      console.log('文件不存在');
    } else {
      console.log('请求出错,状态码:', response.status);
    }
  })
  .catch(error => {
    console.log('请求出错', error);
  });
  1. 如果需要检查多个文件是否存在,可以使用Promise.all方法同时发送多个HEAD请求,并在所有请求返回后进行处理。
代码语言:txt
复制
const urls = ['url1', 'url2', 'url3'];

Promise.all(urls.map(url => fetch(url, { method: 'HEAD' })))
  .then(responses => {
    responses.forEach((response, index) => {
      if (response.status === 200) {
        console.log(`文件${index + 1}存在`);
      } else if (response.status === 404) {
        console.log(`文件${index + 1}不存在`);
      } else {
        console.log(`文件${index + 1}请求出错,状态码:`, response.status);
      }
    });
  })
  .catch(error => {
    console.log('请求出错', error);
  });

这种方法可以有效地检查文件是否存在而不下载文件内容,适用于需要快速判断文件是否存在的场景,例如在文件列表中显示文件的存在状态、在下载前检查文件是否可用等。

腾讯云相关产品推荐:

  • 对象存储(COS):腾讯云提供的高可靠、低成本的对象存储服务,适用于存储和管理大量非结构化数据。
  • 云函数(SCF):腾讯云的无服务器计算服务,可以在云端运行代码,无需关心服务器的配置和管理。
  • CDN加速:腾讯云的内容分发网络服务,可以加速静态资源的传输,提高用户访问速度。
  • API网关(API Gateway):腾讯云的API管理服务,可以帮助开发者构建和管理API,实现灵活的后端服务集成和流量控制。

以上是腾讯云提供的一些与文件存储和网络请求相关的产品,可以根据具体需求选择合适的产品来支持文件存在性检查的功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例

本文实例讲述了PHP检查文件是否存在,不存在自动创建及读取文件内容操作。分享给大家供大家参考,具体如下: <?...读取文件内容 <?php $handle = @fopen("/tmp/inputfile.txt", "r"); if ($handle) { while (!...如果文件存在则尝试创建之。 ‘w+’ 读写方式打开,将文件指针指向文件头并将文件大小截为零。如果文件存在则尝试创建之。 ‘a’ 写入方式打开,将文件指针指向文件末尾。如果文件存在则尝试创建之。...如果文件存在,则 fopen() 调用失败并返回FALSE,并生成一条 E_WARNING 级别的错误信息。如果文件存在则尝试创建之。...此选项被 PHP 4.3.2 以及以后的版本所支持,仅能用于本地文件 更多关于PHP相关内容感兴趣的读者可查看本站专题:《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结

2.8K30
  • 构建离线web应用(一)

    桌面浏览器 用户打开电脑(在家、学校或者办公室) 检查是否连上网络,没有则手动连接 打开 web 应用 移动端浏览器 拿出手机 默认手机已经连接上网络 直接打开 app 如上,用户对待两种场景的处理方式是不一样的...App Shell 是指包含动态内容的一部分应用程序。例如导航菜单、侧边栏、背景、logo 等等。...下载 Materialize 这个 UI 库,用里面 CSS、 Fonts、 js 文件分别替换项目里面的文件夹。...="js/app.js"> 我们已经引入了下载好的文件,还需要自己在相应的目录创建一下 app.css 以及 app.js 这两个文件。...接下来 你已经了解了必备的知识点,PWA 的概念对你来说已经陌生了。接下来,我们将要讨论 PWA 的缓存策略。我们将了解如何使用 IndexDB 来保存数据不是 localStorage。

    1.7K100

    JavaScript工作原理(八):Service Workers,生命周期和应用案例

    它由以下几个阶段组成: 下载 安装 激活 下载 这是浏览器下载包含Service Worker的.js文件的时候。...如果支持,则注册/sw.js Service Worker。 您可以在每次加载页面时调用register()方法不用担心 – 浏览器会判断Service Worker是否已经注册,并且会正确处理。...我们传递了一个来自caches.match()的promise,它查看请求并发现是否有任何已创建的缓存的缓存结果。 如果存在缓存,则返回结果。 否则,将执行fetch事件。 检查状态是否为200。...更新服务工作者 当用户访问您的Web应用程序时,浏览器会尝试重新下载包含Service Worker代码的.js文件。这发生在后台。...如果与当前Service Worker的文件相比,现在下载的Service Worker文件中甚至存在单字节差异,则浏览器将假定有改变并且必须启动新的Service Worker。

    1.3K10

    开发一个渐进式Web应用程序(PWA)前都需要了解什么?

    在这个安装阶段,你可以将PWA使用的所有页面、脚本和样式文件下载并缓存起来,以下是完成这项工作的sw.js文件代码:   const CACHE_STATIC_NAME = 'static'; const...如果所有文件都已被成功缓存,SW就会被安装。但如果其中一个文件无法下载,则安装步骤将会失败。...在Chrome开发者工具中,你可以检查缓存(在Cache Storage中)是否被URLS_TO_PRECACHE数组中的静态文件填充。 ?...(event.request); }) ); }); 我们使用caches.match()函数检查传入的URL是否与当前缓存中可能存在的资源匹配。...后台传输 Background Fetch API是SW的后台功能,它允许用户在后台下载文件、视频和音乐等资源。在获取/传输过程中,你的用户即便关闭标签,乃至关闭整个浏览器,也不会清除传输任务。

    1.6K20

    WorkBox 之底层逻辑Service Worker

    当service worker处理fetch请求时,我们「检查fetch事件处理的请求 URL 是否在预缓存资产的数组中」。 如果是,我们从缓存中获取资源,并跳过网络。...// 建立缓存名称 const cacheName = "前端柒八九_v1"; self.addEventListener("fetch", (event) => { // 检查是否是一个图像请求...// 建立缓存名称 const cacheName = "前端柒八九_v1"; self.addEventListener("fetch", (event) => { // 检查是否是导航请求...这有助于测试当前是否有活动Service Worker提供脱机内容。...检查缓存内容 如果无法检查缓存,就很难确定缓存策略是否按预期工作。Chrome DevTools 的应用程序面板提供了一个子面板,用于检查缓存实例的内容

    39920

    最全面的 Deno 入门教程

    它就像 Node.js 2.0 一样,只有时间才能告诉我们是否会像 2009 年使用 Node.js 一样去使用它。...我们必须允许自己能够访问 Deno 领域以外的所有内容,可能是网络访问或文件访问,否则 Deno 将会拒绝工作。 Deno 的兼容性 前面你已经看到了怎样在 Deno 中使用 fetch。...在浏览器中再次打开 URL,并阅读其中的源代码,并检查是否真的导出了默认函数,即此处的 format 函数: import { serve } from 'https://Deno.land/std/...它都会检查所有的导入,将其下载并捆绑到一个可执行文件中。在 Deno 中导入库的方式受到 Go 语言[10] 的启发。...现在该信息不会存在于源代码中,仅在环境变量文件中可用。

    3.5K10

    JavaScript 是如何工作的:Service Worker 的生命周期及使用场景

    它包括以下几个阶段: 下载 安装 激活 下载 这是浏览器下载包含 Service Worker 的 .js 文件的时候。...上例代码首先检查当前环境中是否支持 Service Worker API。如果支持,则 /sw.js 这个 Service Worker 就被注册了。...换句话说,这个 Service Worker 将为这个域中的所有内容接收 fetch 事件。...如果在缓存中,响应内容就被恢复了。 否则,将会执行 fetch检查状态码是不是 200,同时检查响应类型是 basic,表明响应来自我们最初的请求。在这种情况下,不会缓存对第三方资源的请求。...更新 Service Worker 当用户访问你的 Web 应用程序时,浏览器试图重新下载包含 Service Worker 代码的 .js 文件,这是在后台完成的。

    91910

    Web性能优化之Worker线程(下)

    /serviceWorker.js') .then(console.log, console.error); // ServiceWorkerRegistration { ... } // 使用不存在文件注册...v1 是否存在 .then(() => caches.has('v1')) .then(console.log) // true // 检查存在的缓存 v2 .then(() =>...2. claim()可用于「希望等待页面重新加载」让服务工作线程开始管理页面 生命周期 Service Worker 规范定义了 6 种服务工作者线程可能存在的状态: 已解析parsed 安装中installing...下一次浏览器下载到服务脚本,会与这个快照对比差异,并据此决定「是否应该更新」服务工作线程。...这样可以「立即生效」,不必等待一次导航事件 在「客户端」,这个阶段大致可以通过检查 ServiceWorkerRegistration.active 是否被设置为一个 ServiceWorker 实例来确定

    2.5K20

    StreamSaver.js入门教程:优雅解决前端下载文件的难题

    StreamSaver.js 则通过流式下载的方式解决了这些问题。 StreamSaver.js 将大文件拆分成小块,并在下载过程中逐块传输到硬盘,从而降低内存占用和提高下载速度。...使用 StreamSaver.js 下载文件的大概流程是这样的(为了方便理解,我用一些专业的术语进行描述): 创建一个文件,该文件支持写入操作。...监听文件内容是否读取完整,读取完就执行“保存并关闭文件”的操作。 根据上面的指引编写代码: 下载 <!...// 【步骤2】使用 fetch 方法访问文件的url,将内容一点点的放到 StreamSaver 创建的文件fetch('http://localhost:9988/public...整理一下就是以下几个步骤: 拿到一组下载地址,把它们转存到一个迭代器里。 递归执行迭代器,如果迭代器里还有内容,就使用 fetch 请求数据。

    1.7K30

    不只是离线缓存! - 论如何善用ServiceWorker

    fetch只能传递Requset对象,Requset对象有两个参数(url,[option]),第一个参数是网址,第二个参数为Request的内容,例如body或header。...(req) } } domain.match捕获请求中是否有待替换域名,检查出来后直接replace掉域名,如果没有匹配到,直接透明代理走掉。...原因出在fetch上,这个函数在获得响应之后就立刻resolve了Response,但这个时候body并没有下载完成,即fetch的返回基于状态的而非基于响应内容,当其中fetch已经拿到了完整的状态代码...我个人采取的方式是读取arrayBuffer,阻塞fetch函数直到把整个文件下载下来。...此时如果fetch失败将直接报错,写入缓存。 在下一次获取同一个URL的时候,缓存匹配到的将不再是空白值,此时fetch执行,直接返回缓存,大大提升了速度。

    3.5K21

    编写爬虫竟然成了“面向监狱编程”,就是因为不懂Robots协议(爬虫协议)

    该协议的内容通常放在一个名为robots.txt的文本文件中,该文件一般位于网站的根目录下。...注意,robots.txt文件中的内容只是告诉爬虫应该抓取什么,不应该抓取什么,但并不是通过技术手段阻止爬虫抓取那些被禁止的资源,只是通知爬虫而已。...当爬虫访问一个网站时,首先会检查这个网址根目录下是否存在robots.txt文件,如果存在,爬虫就会根据该文件中定义的抓取范围来抓取Web资源。...*','https://www.jd.com/test.js')) 其中can_fetch方法用来获得该网站某一个URL根据Robots协议是否有权抓取,如果可以抓取,返回True,否则返回False。.../test.js')) 下面的案例使用了parse方法指定robots.txt文件的数据,并输出不同的URL是否允许抓取,这是另外一种使用RobotFileParser类的方式。

    1K20

    如何用 JavaScript 下载文件

    像上面的例子中,我们下载到本地的文件名就会是 filename.zip 拉,如果指定的话,它就会是 somefile.zip 这个名字拉!...最简单的方式就是用 fetch API 了,我们可以整合上面的例子: fetch( 'http://somehost/somefile.zip').then(...如果你要下载的是已经存在服务器上面的静态文件的话,那么写成这样是最方便的。浏览器会帮你处理整个下载过程,不需要你干涉。...如果你用 blob 的方式来下载文件的话,会有下面这些限制的: 限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自 FileSaver.js): Browser Constructs...权限校验 有些时候,我们需要对下载做一些限制,最常见的就是权限校验了,如检查该用户是否下载的权限,是否有高速下载的权限等等。这时候,我们可以利用 JavaScript 做一些预处理。

    1.6K20

    天人合一物我相融,站点升级渐进式Web应用PWA(Progressive Web Apps)实践

    2、当应用有可用的更新时,可以只更新发生改变的那部分内容。相比之下,对于一个原生应用而言,即便是最微小的改动也需要强制用户去进行热更新或者再次下载整个应用。    ...以本站为例,在站点根目录创建sw.js文件,注意Service Worker文件位置一定得在根目录,如果不在根目录也要通过重写或者url映射让其可以通过根目录路径进行访问,如:https://v3u.cn...如果Service Worker逻辑文件更新(相关资源文件变动或者内部逻辑更新等),Service Worker会重新安装,如果这个时候,页面依然存在激活状态下的worker(旧的Service Worker...通过caches.match检查请求是否命中了缓存,如果命中,则直接返回缓存给用户,防止重复请求,节约资源。如果没有命中,则将使用fetch方法请求网络资源并返回给用户。...,看应用清单有没有读出你的 PWA 应用信息配置文件:     随后在serviceWorker标签下检查serviceWorker是否正确运行:     接着访问站点,在地址栏即可添加PWA应用:

    74820

    使用 Service worker 实现加速离线访问博客

    即使是世界上最好的 web app,如果下载不了它,也是非常糟糕的体验。如今虽然已经有很多种技术去尝试着解决这一问题。随着离线页面的出现,一些问题已经得到了解决。...需要说明的是 service-worker.js 文件被放在这个域的根目录下,这意味着 service worker 是跟网站同源的。...如果 service worker 文件注册到 /example/service-worker.js ,那么 service worker 只能收到 /example/ 路径下的 fetch 事件(比如...现在你可以到 chrome://inspect/#service-workers 这里,检查 service worker 是否对你的网站启用了。...3、确定所有的资源是否要被缓存 fetch fetch 用来监听用户的网络请求,并给出回应。

    93920

    【性能】688- 前端性能优化——从 10 多秒到 1.05 秒

    雅虎军规 首先,我们先来看看“雅虎军规”的35条: 尽量减少 HTTP 请求个数——须权衡 使用 CDN(内容分发网络) 为文件头指定 Expires 或 Cache-Control ,使内容具有缓存性...避免空的 src 和 href 使用 gzip 压缩内容 把 CSS 放到顶部 把 JS 放到底部 避免使用 CSS 表达式 将 CSS 和 JS 放到外部文件中 减少 DNS 查找次数 精简 CSS...缓存 缓存会根据请求保存输出内容的副本,例如 页面、图片、文件,当下一个请求来到的时候:如果是相同的 URL,缓存直接使 用本地的副本响应访问请求,不是向源服务器再次发送请求。...需要使用缓存协商,先与服务器确认返回的响应是否被更改,如果之前的响应中存在 ETag ,那么请求的时候会与服务端验证,如果资源未被更改,则可以避免重新下载。...决定是否所有的资源是否要被缓存 上面的代码中,我们通过 caches.open 打开我们指定的 cache 文件名,然后我们调用 cache.addAll并传入我们的文件数组。

    1.3K21

    Fetch还是Axios——哪个更适合HTTP请求?

    我还将讨论 HTTP 拦截和下载进度。 开始吧! Fetch 概述和语法 在构建 Javascript 项目时,我们可以使用 window 对象,并且它带有许多可以在项目中使用的出色方法。...如果我们传递 options,请求总是 GET,它从给定的 URL 下载内容。 在选项参数里面,我们可以传递方法或头信息,所以如果我们想使用 POST 方法或其他方法,我们必须使用这个可选的数组。...对于 .fetch() 方法,就比较复杂了。每次我们从 .fetch() 方法中得到响应时,我们需要检查状态是否成功,因为即使不是,我们也会得到响应。...在 axios 中,实现一个进度指示器也是可能的,而且更容易,因为存在一个现成的模块,可以安装和实现,它叫做 Axios Progress Bar。...大多数浏览器和 Node.js 环境都支持 Axios,现代浏览器仅支持 Fetch,并且某些版本可能会与旧版本一起发布。

    4.9K20
    领券