如何处理 HTML5 Web Workers 中的错误?
假设您希望浏览器在点击某个单词时执行网页上的复杂计算。这需要时间。因此，网页将无响应，直到操作完成。您需要一个能够静默执行所需操作且不影响用户界面的程序。那么，如何解决这个问题呢?
在本文中，我们将讨论如何解决此类问题。
解决方案是 Web Workers。但什么是 Web Workers?让我们来看看。
什么是 Web Workers?
Web Workers 是一个由 JavaScript 代码组成的对象，它在网页后台运行，即在另一个与工作窗口不同的全局上下文中运行，独立于所有其他脚本。工作线程不会中断网页的运行，例如点击、滚动等操作。
Web Workers 创建后，它会向其包含的 JavaScript 代码发送消息。具体来说，它将消息发送到由 JavaScript 代码分配的事件处理程序，反之亦然。Web Worker 和主文档之间使用 postMessage() 方法和 onmessage 属性通过消息进行数据交换。
Web Worker 也可以使用 XMLHttpRequest 与 Web 服务器通信
Web Worker 有两种类型 -
专用 Web Worker - 专用 Worker 只能由调用它的一个脚本访问。
共享 Web Worker - 共享 Worker 可以被多个脚本访问。
Web Worker 的工作原理
让我们看看如何创建一个运行 JavaScript 代码的简单 Web Worker -
<script> var worker = new Worker (‘ demo.js ‘) ; </script>
postMessage() 是一种用于从 Worker 向主文档发送消息的方法。
语法
worker.postMessage();
参数
它包含要传递给主文档的数据。
示例
const webWorker = new Worker (‘ demo.js’ ); webWorker.postMessage ( ‘ This is an example ‘ );
onMessage 是消息事件的一个属性，在通过事件源接收到消息后触发。也可以使用 addEventListener() 方法执行此操作。
语法
worker.onmessage = function (event) {script}
Or
Worker.addEventListener ("message", script);
Example
<script> const webWorker = new Worker ( ‘demo.js ‘); webWorker.onmessage = function (event) => { console.log ( ‘ this is an example’ ); }; webWorker.addEventListener ( "message", function(e) { document.getElementById ( " demo ").innerhtml; }; </script>
如何终止 Web Worker?
如果您想停止正在执行代码的 Web Worker，可以使用 terminate() 方法停止 Worker 线程。您也可以使用 close() 方法。
terminate() 方法用于从主文档停止 Worker，而 close() 方法用于从 Worker 自身作用域停止 Worker。
语法
webWorker.terminate(); webWorker.close();
示例
const webWorker = new Worker (‘ demo.js’); webWorker.onmessage = function (event) => { document.getElementById ( ‘ demo’ ); }; webWorker.terminate();
调试错误
在 JavaScript 中，当 Web Worker 运行过程中发生错误时，会使用 error 事件进行调试。
onerror 处理程序有 3 个主要属性。它们如下:
message - 仅在发生错误时发出通知
lineon - 通知 Worker 中导致错误的行号
filename - 通知 Worker 中发生错误的文件的名称。
语法
addEventListener ( ‘error’ , (event) => {});
Or
Onerror = ( event) => {} ;
示例
<script> const webWorker = new Worker ( ‘demo’ ); webWorker.postMessage (‘ this is an example of error handling ‘); webWorker.addEventListener ( "message" , function(event){ alert ( "Completed" + event.data + "of the operation"); }; webWorker.onerror = (event) => { console.log (‘ Error identified with your worker ‘ ) ; }; </script>
让我们通过另一个例子来理解整个过程 -
假设你想求 10000 的阶乘，并且你想使用 Web Worker。
首先创建一个名为 demo.js 的外部 js 文件
const number = 10000; const fact = 1; for ( let i= 1; i<= number; i++){ fact = fact * I; } console.log(fact);
现在编写 HTML 代码 -
<html> <title> Web Workers </title> <script> const webWorker = new Worker ( ‘demo.js’ ); webWorker.onmessage = function (event) { document.getElementById( "solution" ).innerhtml = event.data; }; webWorker.onerror = event => { console.log( " error occurred while doing the operation "); }; </script> <body> <div id = "solution" ></div> </body> </html>
此处，
event.data 元素包含由 Web Worker 发送的消息。
注意 − Web Worker 执行的代码始终存储在单独的 JavaScript 文件中。
结论
Web Worker 是 HTML5 的一项新功能。虽然它在 Web 浏览器上执行繁重计算时非常有用，但由于仍处于开发阶段，因此可能会出现错误。因此，最好在网页代码中添加错误处理功能，以便在出现此类错误时收到通知，从而进行调试操作。
