使用 throw 在异步 JavaScript 中处理错误

Question

我在尝试理解有关错误处理的练习中的以下代码时遇到了一些问题：

const getSuggestions = () => {
  const wordQuery = inputField.value;
  const endpoint = url + wordQuery;

  fetch(endpoint, {cache: 'no-cache'})
  .then(response => {
    if(response.ok) {
      return response.json();
    } throw new Error('Request failed!');
  }, networkError => {
    console.log(networkError.message);
  })
}

我的问题是：为什么我们会在这里捕获两次错误？一次使用

throw new Error

，一次在

 networkError

中添加第二个参数

.then()

？他们是否捕获了相同的错误，因此是多余的？

如果我们在这里使用

try...catch...

，它看起来如何？

Answer 1

因为 fetch 只会在网络错误时抛出错误，而不会在错误状态代码（如 404）上抛出。

在此片段中，有人检查了响应是否为 200，如果没有，则使用 throw 添加“自定义”错误。

Answer 2

这是等效的代码，但希望更易于理解

  fetch(endpoint, {cache: 'no-cache'})
  .catch(networkError => {
      console.log(networkError.message);
      return 'networkError'
   })
  .then(response => {
     if (response == 'networkError') return;
     if (response.ok) {
        return response.json();
     } else {
        throw new Error('Request failed!');
     }
  })

Answer 3

2种错误机制分别处理不同类型的错误：

1. if(!response.ok) 处理来自服务器的 http 响应，用于 http 4xx 和 5xx 响应状态。调用到达了一个 http 服务器，它响应了。

2. networkError => { 是在到达服务器之前出现的错误，甚至可能到达网络。

他们非常不同，管理方式不同。