异步JavaScript中fetch双错误处理疑问及try...catch实现咨询

原代码 #

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 和 .then()的第二个参数networkError？二者是否存在冗余？
• 如何用try...catch...改写这段代码？

解答 #

两种错误处理的区别（无冗余） #

fetch()的Promise行为有特殊性：它只会在请求根本无法完成（比如断网、域名解析失败）时触发reject；只要HTTP请求发出并收到服务器响应（哪怕是404、500这类错误状态码），Promise都会resolve。

两种处理方式对应完全不同的错误场景：

• throw new Error：处理HTTP响应错误。在.then()的第一个回调里，通过response.ok判断状态码是否为2xx（请求成功），如果不是就主动抛出错误，用来标记HTTP层面的失败（后续可通过.catch()捕获，原代码未实现这一步，但该逻辑是必要的错误标记）。
• .then()的第二个参数networkError：处理网络层面的错误。当请求根本无法完成时，Promise会reject，这个回调会触发，专门处理这类网络故障。

用try...catch改写 #

try...catch需要配合异步函数（async/await）使用，改写后的代码如下：

const getSuggestions = async () => {
  try {
    const wordQuery = inputField.value;
    const endpoint = url + wordQuery;
    const response = await fetch(endpoint, { cache: 'no-cache' });
    
    if (!response.ok) {
      throw new Error('Request failed!');
    }
    
    const data = await response.json();
    // 此处可添加对返回数据的处理逻辑
  } catch (error) {
    // 统一捕获网络错误和HTTP错误
    console.log(error.message);
  }
}

内容的提问来源于stack exchange，提问作者yugdr