详解Web中多线程的方法Web Workers（四）- 案例

处理网络请求

如有一个Web应用程序需要发起大量网络请求的场景。在主线程内执行这些请求可能会导致用户界面变得无响应并导致较差的用户体验。为了防止这个问题，我们可以利用Web Workers在后台处理这些请求。通过这样做，主线程可以自由地执行其他任务，而Web Worker同时处理网络请求，从而提高了性能和更好的用户体验。

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

// worker定义一个处理 message 的函数
worker.onmessage = function(event) {
  const response = event.data;
  console.log(response);
};

// 给 worker 发送一个消息开始 请求
worker.postMessage({ urls: ['https://api.example.com/foo', 'https://api.example.com/bar'] });

// worker.js:

// 定义一个函数用来 处理网络请求
function request(url) {
  return fetch(url).then(response => response.json());
}

// 主线程定义一个处理 message 的函数
onmessage = async function(event) {
  const urls = event.data.urls;
  const results = await Promise.all(urls.map(request));
  postMessage(results);
};

在本例中，我们创建了一个新的WebWorker，并定义了一个函数来处理来自Worker的消息。然后，我们向worker发送一条消息，其中包含要请求的URL数组。

worker收到此消息，并使用 fetch API在后台执行请求。当所有的请求都完成后，工作线程将结果发送回主线程。主线程接收此消息并将结果输出到控制台。

并行处理

假设我们有一个需要执行大量独立计算的Web应用程序。如果我们在主线程中按顺序执行这些计算，用户界面将变得无响应，用户体验将受到影响。为了避免这种情况，我们可以使用Web Worker来并行执行计算。

const worker = new Worker('worker.js');
 
worker.onmessage = function(event) {
  const result = event.data;
  console.log(result);
};
 
worker.postMessage({ nums: [1000000, 2000000, 3000000] });
 
function compute(num) {
  let sum = 0;
  for (let i = 0; i < num; i++) {
    sum += i;
}
  return sum;
}
 
onmessage = function(event) {
  const nums = event.data.nums;
  const results = nums.map(compute);
  postMessage(results);
};

在本例中，我们创建了一个新的WebWorker，并定义了一个函数来处理来自Worker的消息。

然后，我们向worker发送一条消息，其中包含一组要计算的数字。worker接收此消息并使用map方法并行执行计算。

当所有的计算都完成后，工作线程将结果发送回主线程。主线程接收此消息并将结果记录到控制台。