获取文件流后使用fetch API下载文件

在浏览器环境中，由于安全策略，`fetch` API本身并不直接支持像Node.js那样获取文件流并下载文件。但是，我们可以利用`fetch`配合其他技术来实现这个功能。以下是一个示例，展示了如何使用`fetch`获取远程资源（如文件），然后创建一个`Blob`对象并将其转换为可下载的链接：

async function downloadFileWithFetch(url) {
  try {
    const response = await fetch(url);

    // 检查是否成功
    if (!response.ok) {
      throw new Error(`Request failed with status ${response.status}`);
    }

    // 将响应体转化为Blob对象
    const blob = await response.blob();

    // 创建一个临时URL，用户可以通过该URL下载文件
    const urlToDownload = URL.createObjectURL(blob);

    // 创建一个a标签隐藏地点击下载
    const aLink = document.createElement('a');
    aLink.href = urlToDownload;
    aLink.download = path.basename(url); // 文件名
    aLink.style.display = 'none';
    document.body.appendChild(aLink);

    // 触发click事件触发下载
    aLink.click();
    
    // 清理临时URL
    URL.revokeObjectURL(urlToDownload);
    
    // 删除已创建的链接
    document.body.removeChild(aLink);
  } catch (error) {
    console.error('Error downloading file:', error);
  }
}

// 调用函数，传入你想下载的文件URL
downloadFileWithFetch('https://example.com/somefile.pdf');

这段代码首先使用`fetch`获取文件内容，然后创建一个`Blob`对象，再生成一个临时URL。接着创建一个`<a>`元素并设置其属性，使其看起来像是点击了某个链接。实际上，我们只是模拟了一个点击动作触发下载。下载完成后，记得清除临时URL以释放内存。

相关问题：
1. 在浏览器环境中为什么要先创建`Blob`对象？
2. `URL.createObjectURL()`的作用是什么？
3. 如何避免多次调用`downloadFileWithFetch`导致多个下载任务同时执行？