解决 ES8 async/await 报错 Uncaught(in promise) TypeError: Cannot read property 'xxx' of null/undefined 的问题-JavaScript中文网-JavaScript教程资源分享门户

问题背景

在使用 ES8 的 async/await 特性时，你可能会遇到以下报错信息：

Uncaught(in promise) TypeError: Cannot read property 'xxx' of null/undefined

这可能是由于您的异步函数返回了 null 或 undefined 导致的。在您尝试访问一个不存在的属性时，将会得到以上的错误提示。

解决方法

为了解决这个问题，您可以在函数内部判断异步操作的结果是否为 null 或 undefined。如果是，您可以返回一个合适的默认值或者抛出一个异常。

1. 返回默认值

async function fetchData() {
  const result = await yourAsyncFunction()
  if (!result || !result.data || !result.data.xxx) {
    return defaultValue;
  }
  return result;
}

在这个例子中，我们检查了异步操作的结果及其属性是否存在。如果任何一个属性不存在，我们将返回一个默认值，避免了 null 或 undefined 值的出现。

2. 抛出异常

async function fetchData() {
  const result = await yourAsyncFunction()
  if (!result || !result.data || !result.data.xxx) {
    throw new Error('Data format is incorrect.');
  }
  return result;
}

在这个例子中，我们同样检查了异步操作的结果及其属性是否存在。但是，如果任何一个属性不存在，我们将抛出一个异常。这种方法在编写可重用组件时非常有用，因为它可以使用户清楚地知道发生了什么错误，同时不会干扰应用程序的正常运行。

总结

避免对 null 或 undefined 进行访问是很重要的，因为这样的操作可能会导致应用程序的崩溃。在使用 ES8 的 async/await 特性时，您应该时刻记住检查异步操作的结果及其属性是否存在，并在必要时进行异常处理。这将确保您的应用程序具有更强的健壮性和可维护性。

示例代码

// 定义异步操作函数
async function fetchData() {
  const result = await fetch('https://api.example.com/data');
  const data = await result.json();
  return data;
}

// 调用异步操作函数
async function main() {
  try {
    const data = await fetchData();
    console.log(data.xxx);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

main();

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b643b5add4f0e0ffef21e7