JavaScript fetch（）无法捕获404的错误

Question

我正在尝试使用此fetch（）函数处理Chrome中的404。

function promiseBatchDomains(domainsToQuery) {
  var batchSize = domainsToQuery.length
  var currentDomain = 0
  var promises = domainsToQuery.map(domain => (
    fetch(`https://api-url-omitted/${domain}`)
      .then( res => {
        if (res.ok) {
          return res
        } else {
          throw Error(res.statusText)
        }
      })
      .then(res => res.json())
      .then(res => {
        currentDomain += 1
        console.log(currentDomain + " of " + batchSize + ': ' + domain + ' data received.')
        percentCompletion = parseFloat(currentDomain / batchSize).toLocaleString(undefined,{style: 'percent'})
        $('#batchProgressBar').attr('aria-valuenow', percentCompletion).width(percentCompletion)
        return res
      })
      .then(res => ({ domain, res })
      .catch(error => console.log("Error: " + error))
  ))).filter(Boolean)

  Promise.all(promises)
    .then(results => makeCSV(results))
}

我需要帮助理解为什么我在if / else语句中抛出的错误没有被catch捕获。

基于here，here，here和here概述的方法，我尝试了几种不同的方法：抛出错误，如上面的代码，以及Promise.reject()。它无论如何都会挂起，所以我想知道我是否遗漏了一些更基本的东西。

在我的控制台中，我只看到原始的404，但不是我的错误中的console.log，如果捕获被触发，我认为应该触发。 （当它不是404时，此函数的其余部分按预期工作。）

更新：我用这样的if语句重构了第三个.then()方法：

.then(res => {
        currentDomain += 1
        if (domain) {
          console.log(currentDomain + " of " + batchSize + ': ' + domain + ' data received.')
          percentCompletion = parseFloat(currentDomain / batchSize).toLocaleString(undefined,{style: 'percent'})
          $('#batchProgressBar').attr('aria-valuenow', percentCompletion).width(percentCompletion)
          return {domain, res}
        }
      })

现在抓住了触发器。不应该throw Error()导致它跳过所有.then()方法，并直接错误？

Answer 1

好的，所以我在这里遇到了几个我能解决的问题：

1. 需要在if语句中包含包含变量的表达式，以防止未定义的值挂起脚本。
2. 需要在.filter(Boolean)下移动Promise.all()，如下：Promise.all(promises).then(results => results.filter(Boolean)).then(results => makeCSV(results))

过滤器（布尔值）不是原始问题中陈述的问题的一部分，但它最终导致未定义的变量传递给后续函数。通过这种方式过滤布尔值，我避免在下游传递坏值。