fetch API catch块语句执行异常及多数据返回相关问题

多执行日志的原因 #

你代码中的问题出在catch的回调函数写法：箭头函数如果不使用花括号{}包裹代码块，仅能包含单条表达式。你用逗号分隔两个console.log语句时，JS的逗号运算符会把两个语句拆分为完全独立的两部分：只有第一个console.log('error', err)属于catch的回调逻辑，第二个console.log("this is test")是和整个fetch链式调用平级的全局代码，页面加载时就会直接执行，和catch是否被触发没有任何关系。

修复方式很简单，用花括号把所有需要在错误触发时执行的代码包裹起来即可：

fetch('api', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    console.log('error', err); 
    console.log("this is test"); // 现在只有捕获到错误时才会执行
  });

catch块返回自定义数据的方法 #

catch方法本身会返回一个状态为resolved的Promise实例，你只需要在catch的回调函数里直接return你需要的自定义数据即可，后续可以通过链式调用的then接收这个返回值，通常用来做错误兜底逻辑：

fetch('api', options)
  .then(response => response.json())
  .then(data => {
    console.log('接口返回数据', data);
    return data;
  })
  .catch(err => {
    console.log('请求报错', err);
    // 这里返回你需要的自定义数据，比如兜底的错误结构
    return {
      status: 'fail',
      message: '网络请求异常',
      list: []
    }
  })
  .then(finalRes => {
    // 无论请求成功失败，这里都能拿到对应数据：成功拿接口返回值，失败拿catch返回的兜底值
    console.log('最终处理数据', finalRes);
  })

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