在开发 Web 应用程序时，我们通常需要加载各种资源文件，例如图像、样式表和脚本。但是，如果我们在页面中引用了不存在的文件，就会在控制台中看到 404 错误，这不仅会影响用户体验，而且还可能影响搜索引擎的排名。
有没有一种方法可以检查文件是否存在，从而避免这种情况呢？答案是肯定的！在本文中，我们将介绍如何使用 JavaScript 检查文件是否存在，并在文件不存在时处理错误，以防止控制台中出现 404 错误。
检查文件是否存在
为了检查文件是否存在，我们需要使用 XMLHttpRequest 对象。XMLHttpRequest 是一个 JavaScript 对象，用于在后台与服务器交换数据。我们可以使用它来加载文件并检查状态码。
以下是一个基本的例子：
-- -------------------- ---- -------
-------- -------------- --------- -
--- --- - --- -----------------
---------------------- - ---------- -
-- --------------- --- -------------------- -
------------------- -- -----
-
--
---------------- ---- ------
-----------
-
----------------------------------------- ---------------- -
-- -------- -
----------------- ----------
- ---- -
----------------- ---- --- ---------
-
---在上面的例子中，我们定义了一个名为 checkFile 的函数，它接受两个参数：文件的 URL 和回调函数。然后，我们创建了一个 XMLHttpRequest 对象，并将其 onreadystatechange 属性设置为一个匿名函数。在该函数中，我们检查 readyState 是否等于 XMLHttpRequest.DONE（即请求已完成）并检查状态码是否为 200（即文件存在）。最后，我们通过调用回调函数将结果返回给调用方。
防止控制台中出现 404 错误
如果我们使用上面的函数检查一个不存在的文件，我们仍然会在控制台中看到 404 错误。这是因为浏览器仍然会尝试加载文件，并在文件不存在时发出错误。为了避免这种情况，我们可以使用 try...catch 语句来捕获错误。
以下是一个修改后的例子：
-- -------------------- ---- -------
-------- -------------- --------- -
--- --- - --- -----------------
---------------------- - ---------- -
-- --------------- --- -------------------- -
------------------- -- -----
-
--
---------------- ---- ------
-----------
-
-------- -------------- ---------------- -------------- -
--- --- - --- --------
---------- - ----------------
----------- - --------------
------- - ----
-
----------
-------------------------------
---------- -
----------------- ----------
--
---------- -
----------------- ---- --- ---------
-
--在这个例子中，我们定义了两个新函数：loadImage 和 errorCallback。loadImage 函数创建一个新的 Image 对象，并将其 onload 和 onerror 属性设置为对应的回调函数。然后，我们通过将文件的 URL 赋值给 img.src 来加载文件。如果文件存在，onload 回调函数将被调用。否则，onerror 回调函数将被调用。
我们可以使用这个函数来检查文件是否存在，并防止控制台中出现 404 错误。如果文件不存在，我们只需要在 errorCallback 中添加代码，以处理错误即可。
总结
在本文中，我们介绍了如何使用 JavaScript 检查文件是否存在，并防止控制台中出现 404 错误。我们学习了如何使用 XMLHttpRequest 对象来加载文件并检查状态码，以及如何使用 try...catch 语句来捕获错误。我们还看到了如何使用新的 loadImage 函数来避免
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11772
