解决 JavaScript Promise 错误“TypeError: 无法读取未定义的‘Then’”

2020-05-22 08:00:00 · 飞浪

介绍使用JavaScriptPromise会产生一系列错误，其中一个常见的错误是TypeError：无法读取未定义的属性“then”。在本指南中，我们将介绍两个包含导致此TypeEr

介绍

使用 JavaScript Promise 会产生一系列错误，其中一个常见的错误是
TypeError：无法读取未定义的属性“then”。

在本指南中，我们将介绍两个包含导致此TypeError 的错误的代码示例，然后重构代码来解决问题。

示例 1

假设您有getTaxAmount(price, taxRate)函数。它接受两个参数，price和taxRate，使用输入计算税额，并预计返回一个解析为计算出的税额的Promise 。

接下来，使用两个参数调用getTaxAmount()函数并在控制台上记录返回值。

      const getTaxAmount = (price, taxRate) => {
  Math.floor((price * taxRate) / 100);
};

getTaxAmount(100, 12).then((taxAmount) => console.log(taxAmount));
    

如果你在浏览器控制台上或使用Node CLI 运行此有缺陷的代码，你将收到此错误：

      TypeError: Cannot read property 'then' of undefined

示例 2

这是另一个示例。getGithubOrgs (url)是一个函数，它接受 URL 并使用 Fetch API 获取给定用户 (deekshasharma) 的 GitHub 组织数据。fetch ()向目标 URL 发出网络请求并返回一个解析为响应对象的Promise。然后将响应解析为 JSON。此函数应返回一个应解析为 JSON 数据的Promise 。

然后使用包含有效 URL 的参数调用getGithubOrgs()函数，并在控制台上记录生成的 JSON。

      function getGithubOrgs(url) {
  fetch(url).then((response) => response.json());
}

getGithubOrgs(
  "https://api.github.com/users/deekshasharma/orgs"
).then((jsonData) => console.log(jsonData));
    

当你在浏览器控制台中运行此代码时，你将收到一个错误：

      TypeError: Cannot read property 'then' of undefined

导致此 TypeError 的原因

当调用者期望返回Promise而实际收到undefined时，会抛出TypeError - Cannot read property 'then' of undefined。让我们考虑一下上面的例子。

在示例 1 中，getTaxAmount(price, taxRate)函数在调用时应该返回一个解析为值12的Promise。目前，此函数仅使用两个输入计算税额，不返回任何值。因此，返回了未定义的值。

在示例 2 中，getGithubOrgs(url)函数调用 Fetch API，该 API 返回一个解析为响应对象的Promise。then ()方法接收此结果Promise ，该方法使用json()方法将响应解析为 JSON 。最后，then()返回一个解析为 JSON 的新Promise 。但您可能已经注意到getGithubOrgs(url)函数中没有return语句，这意味着 then() 方法生成的Promise永远不会返回给调用代码。

如何修复此错误

要解决这两个代码示例中的问题，您需要重构这些函数。让我们逐一查看。

示例 1

函数getTaxAmount()应该重构为下面的代码。

Promise.resolve()返回已解析的Promise，其中包含函数计算出的税额值。因此，只要传递了有效的参数，调用代码就会始终收到Promise 。

      const getTaxAmount = (price, taxRate) => {
  return Promise.resolve(Math.floor((price * taxRate) / 100));
};

getTaxAmount(100, 12).then((taxAmount) => console.log(taxAmount));
    

在浏览器控制台或Node CLI 上运行此代码，您应该得到输出12。

示例 2

应该重构函数getGithubOrgs(url)以包含一个return语句，以便可以向调用者返回Promise 。

      function getGithubOrgs(url) {
  return fetch(url).then((response) => response.json());
}

getGithubOrgs("https://api.github.com/users/deekshasharma/orgs").then((res) =>
  console.log(res)
);
    

结论

每当您在使用 JavaScript Promise 时看到此TypeError时，第一步是检查预期返回Promise的代码。毕竟，在Promise上调用then()方法时会出现此错误。并且TypeError表示您正在对undefined调用then()，这暗示Promise本身是undefined。下一步是去调试代码以找出为什么没有返回Promise。我们查看了两个不同的代码示例，以了解可能导致此错误的原因以及如何解决它。

您可以在MDN上阅读有关Promise.then()的更多信息。

了解更多

探索 Pluralsight 的这些 Javascript 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

解决 JavaScript Promise 错误“TypeError: 无法读取未定义的‘Then’”

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

function getGithubOrgs(url) { fetch(url).then((response) => response.json()); } getGithubOrgs( "https://api.github.com/users/deekshasharma/orgs" ).then((jsonData) => console.log(jsonData));

function getGithubOrgs(url) { return fetch(url).then((response) => response.json()); } getGithubOrgs("https://api.github.com/users/deekshasharma/orgs").then((res) => console.log(res) );