通过async方式在浏览器中调用web worker

近年来，网络应用程序变得越来越复杂，增加了越来越多的功能。因此，性能和响应性已成为 Web 开发人员关注的重点。解决这个问题的一个办法是使用web worker。

web worker简介

web worker是一个 javascript api，这使得开发人员可以在浏览器后台中运行脚本而不会阻塞用户界面。

这也意味着一些类似执行复杂的计算等耗时长的任务能在后台中运行，而不会影响web的性能。

web worker通过创建一个单独的执行线程来工作，该线程在后台运行脚本。这个线程与主线程完全分离，主线程负责绘制网页和响应用户输入。这意味着后台脚本可以独立于主线程运行,而不会阻塞它。

使用web worker的好处

在Web应用程序中使用 web worker 可以有以下好处：

改进性能
通过在后台运行长期运行的任务，web worker 可以提高Web应用程序的性能。这是因为主线程不会被长时间运行的任务阻塞，这使它能够继续呈现网页并响应用户输入。
提高反应能力
web worker 还可以提高Web应用程序的响应能力。通过在后台运行任务，用户界面保持响应性，即使应用程序正在执行长时间运行的任务。
更好的用户体验
通过改进性能和响应能力，web worker 可以为Web应用程序提供更好的用户体验。用户更有可能继续使用快速和响应的应用程序，而不是缓慢和不响应的应用程序。

实现一个异步调用方式

让我们以下面例子来介绍：

创建一个web worker

要创建一个web worker，我们需要创建一个新的 javascript 文件，该文件将包含我们希望在后台运行的代码。

在这个例子中，我们将创建一个 worker.js 文件。 .

js 复制代码

self.onmessage = function(event) {
  // 从事件中检索数据
  const requestData = event.data;

  //执行异步API调用
  performAPICall(requestData)
    .then(responseData => {
      // 将响应数据送回主线程
      self.postMessage(responseData);
    })
    .catch(error => {
      // 处理在API调用期间发生的任何错误
      console.error('Error:', error);
    });
};

在这个文件中,我们定义一个叫做onmessage的方法，当web worker从主线程收到消息时将调用。

创建API调用

接下来，我们需要创建将进行API调用的代码。

在这个例子中，我们将使用performAPICall() 方法去调用fetch方法调用api。

js 复制代码

function performAPICall() {
  // 创建一个封装异步API调用的promise
  return new Promise((resolve, reject) => {
    // 使用fetch或任何其他合适的方法执行API调用
    fetch('http://example.com', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then(response => {
        if (response.ok) {
          resolve(response.json());
        } else {
          reject('API call failed with status: ' + response.status);
        }
      })
      .catch(error => {
        reject(error);
      });
  });
}

创建主线程

现在我们已经创建了 web worker 和 API 调用，我们需要创建将与 web worker 进行通信的主线程。

在这个例子中，让我们创建一个 app.js 文件。

js 复制代码

// 创建一个worker
const worker = new Worker('worker.js');

// 发送数据
worker.postMessage('API Call');

// 监听webworker传递过来的数据
worker.onmessage = function (event) {
  // 从事件中检索响应数据
  const responseData = event.data;

  // 处理答复数据
  processResponse(responseData);
  console.log("Response Arrived", responseData);
};

function processResponse(responseData) {
  // 处理和处理来自API调用的响应数据
  let ulElem = document.getElementById("listing");
  ulElem.innerHTML = '';
  for (let i = 0; i < 10; i++) {
    let elem = `<li>${responseData[i].title}</li>`
    ulElem.innerHTML += elem;
  }
}

我们使用 postMessage() 向 web worker 发送消息，而后web worker将启动API调用功能。

在上面的代码中，我们创建了一个Worker 的新实例并定义了一个叫做onmessage的方法，用于将消息发送回主线程。

processResponse(responseData) 是一个处理响应数据并帮助以列表格式显示的函数。

运行代码

要运行代码,我们需要创建一个HTML文件，其中需要引入 app.js 文件。

html 复制代码

<!DOCTYPE html>
<html>

<head>
  <title>Web Worker Example</title>
</head>

<body>
  <script src="app.js"></script>
</body>

</html>

当我们在浏览器中打开这个HTML文件时，web worker 将开始在后台进行·API·调用。一旦·API·调用完成，web worker 将响应发送回主线程，在那里我们可以根据需要处理数据。

常见需求

web worker可用于各种应用程序，包括：

游戏
web worker可以在基于网络的游戏中进行复杂的计算，例如物理模拟或人工智能算法。通过在后台运行这些计算，游戏可以保持响应性，即使在执行复杂任务时也是如此。
视频和音频处理
web worker可以用于处理视频或音频数据的应用程序，如视频编辑软件或音频处理工具。通过在后台运行这些任务,即使在处理大量数据时，应用程序也可以保持响应性。
数据可视化
web worker可以用于执行数据可视化的应用程序，如图表或图表。通过在后台运行这些任务，即使在处理大量数据时，应用程序也可以保持响应性。