Axios错误处理代码优化：如何精简多层属性存在性判断？

问题描述 #

我采用如下方式测试Axios的错误返回结果：

.catch((error) => {
    if (!error.response || !error.response.data || !error.response.data[0] || !error.response.data[0].err_code) {
        reject(999);
    } else {
        reject(error.response.data[0].err_code);
    }
});

由于error对象结构不稳定，有时包含完整的error.response.data[0]层级，有时则缺失。请问是否有更简洁的方式判断该层级是否存在，避免当前冗长的判断逻辑？

解决方案 #

1. 可选链+空值合并运算符（推荐） #

ES2020及以上环境可直接使用可选链?.简化多层级判断，搭配空值合并运算符??设置默认值，一行代码搞定：

.catch((error) => {
  reject(error?.response?.data?.[0]?.err_code ?? 999);
});

• ?.会逐层检查属性是否存在，某一层不存在则返回undefined，不会抛出错误
• ??仅在左侧值为null或undefined时，返回右侧的默认值999，避免0、''等合法值被误替换

2. 兼容旧环境的函数封装 #

如果需要支持不支持ES2020的环境，可以封装一个通用的嵌套属性取值函数：

function getNestedProp(obj, path) {
  return path.reduce((curr, key) => curr?.[key], obj);
}

// 使用示例
.catch((error) => {
  const errCode = getNestedProp(error, ['response', 'data', 0, 'err_code']) ?? 999;
  reject(errCode);
});

函数通过遍历路径数组，利用可选链安全访问每一层属性，最终返回目标值或undefined。

3. Try-Catch捕获异常 #

直接尝试访问目标属性，用try-catch处理可能的访问错误，代码简洁直观：

.catch((error) => {
  let errCode = 999;
  try {
    errCode = error.response.data[0].err_code;
  } catch {
    // 忽略属性不存在的异常，保持默认值
  }
  reject(errCode);
});

此方法适合路径固定但层级较深的场景，注意如果error本身可能为null/undefined，建议先做基础判断：if (!error) reject(999);

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