window.location.href 在 forEach 二次迭代中不起作用答案

【问题标题】：window.location.href not working in forEach second iterationwindow.location.href 在 forEach 二次迭代中不起作用
【发布时间】：2019-11-22 13:34:17
【问题描述】：

我正在尝试使用 window.location.href 下载多个文件。我从 s3 获取文件 url 并推送到具有链接的数组中。它只在第一次迭代中工作。在第二次迭代中，文件不下载但迭代发生。提前致谢。

var urls = [
    "https://www.s3.com/files1",
    "https://www.s3.com/files2",
    "https://www.s3.com/files3"
];
urls.forEach(url => {
    window.location.href = url;
})

【问题讨论】：

它仅适用于第一次迭代，因为您将用户重定向到第一个 URL，因此他们不再在您的页面上...
为 location.href 分配一个新的 URL 构成“离开页面”，因此浏览器将在此时停止脚本执行和进一步处理。（您也无法通过单击单个正常链接来一次加载“多个页面”。）您可以尝试为每个项目生成一个 iframe，并将 URL 指定为该项目的来源。（不过，如果这些 URL 中的任何一个禁止在框架中显示，这将失败。）

标签： javascript typescript foreach

【解决方案1】：

在第一次迭代中，url 发生变化，然后浏览器不再运行您编写的脚本。

它运行与当前活动的新 URL 相关联的脚本。即“https://www.s3.com/files1”在您的情况下。

正确的方法是使用 fetch 或 axios 来访问这些 url。

【讨论】：

【解决方案2】：

考虑使用 fetch 或其他 API 来发出 XHR 请求。之后，为每个调用指定要返回的内容（我输入的是 blob 类型）。

当所有操作都完成（获取承诺）后，您应该得到结果（res）。如果出现任何问题，请在您的 catch 块中处理它。

let arr = [];
const urls = [
  "https://www.s3.com/files1",
  "https://www.s3.com/files2",
  "https://www.s3.com/files3"
];



Promise
  .all(urls.map(url => fetch(url).then(res => res.blob())))
  .then(res => {
    console.log('files here', res);
  }).catch(err => console.log('error occured while fetching', err))

【讨论】：