JavaScript承诺：避免它们的3个陷阱和技巧-CSDN博客

现在，我们已经介绍了Promise的一些基本概念和实现，下面让我们看一下我所见过的三个Promise陷阱，以及可能有用的一些技巧。

[Git要点： Git版本控制入门。 • Git和GitHub的20个基本指针。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]

陷阱＃1：承诺处理者返回承诺

如果您要从then或catch处理程序返回信息， then该信息将始终包装在一个Promise中，如果它还不是Promise的话。您无需编写如下代码：

firstAjaxCall.then(() => {
  return new Promise((resolve, reject) => {
    nextAjaxCall().then(() => resolve());
  });
});

在上述情况下，由于nextAjaxCall还返回了promise，因此您可以执行以下操作：

firstAjaxCall.then(() => {
  return nextAjaxCall();
});

此外，如果你回到一个普通（非诺）值，该处理程序将返回解析为价值承诺，这样你就可以继续拨打then对结果：

firstAjaxCall.then((response) => {
  return response.importantField
}).then((resolvedValue) => {
  // resolvedValue is the value of response.importantField returned above
  console.log(resolvedValue);
});

技巧1：使用Promise.resolve（）

如果要对可能不是承诺的传入值进行操作，只需使用静态方法Promise.resolve() 。例如，如果您获得的变量可能不是promise，只需将其作为参数传递给Promise.resolve 。如果变量是一个Promise，则该方法将返回Promise。如果变量是一个值，则该方法将返回解析为该值的promise。

let processInput = (maybePromise) => {
  let definitelyPromise = Promise.resolve(maybePromise);
  definitelyPromise.then(doSomeWork);
};

难题＃2：.then始终执行功能

我无法告诉您我看过（并且肯定写过）许诺代码看起来像这样的次数：

let getAllArticles = () => {
  return someAjax.get('/articles');
};
let getArticleById = (id) => {
  return someAjax.get(`/articles/${id}`);
};

getAllArticles().then(getArticleById(2));

上面代码的目的是首先获取所有文章，然后完成，获取ID为2的文章。实际上，尽管我们可能希望按顺序执行，但这两个承诺实际上已经开始同一时间。他们可以按任何顺序完成。

如果我不得不猜测，我会说这种混乱是由于对Promise的自然语言阅读而引起的，这使人们忘记了JavaScript的一些更基本的规则。问题在于，函数的参数始终在传递给函数之前进行评估。 then未接收的功能; 它正在接收getArticleById的返回值，因为我们立即使用括号运算符调用getArticleById 。

如果要顺序处理这两个函数，可以执行以下操作：

// A little arrow function is all you need
getAllArticles().then(() => getArticleById(2));

通过包装调用getArticleById箭头的功能，我们提供.then用功能时，它可以调用getAllArticles()已得到解决。

技巧2：将命名函数传递给.then

您不必总是使用内联匿名函数作为.then参数。您可以轻松地将函数分配给变量，然后将该函数的引用传递给.then 。基于我们之前的示例：

/* function definitions from Gotcha #2 */
let getArticle2 = () => {
  return getArticleById(2);
};

getAllArticles().then(getArticle2);

注意，我正在传递对该函数的引用，而不是调用它，这是我们在Gotcha＃2中遇到的问题。

难题＃3：非功能性.then参数

让我们以Gotcha＃2为例，并在链的末尾添加一些额外的处理：

let getAllArticles = () => {
  return someAjax.get('/articles');
};
let getArticleById = (id) => {
  return someAjax.get(`/articles/${id}`);
};

getAllArticles().then(getArticleById(2)).then((article2) => { /* Do something with article2 */});

我们已经知道该链不会按我们期望的顺序运行，但是现在我们发现了承诺土地中的一些古怪行为。您认为article2的值在最后一个.then什么？

由于我们没有将函数传递给.then的第一个参数，因此JavaScript（即getAllArticles()规范）将使用其已解析的值传入初始getAllArticles() ，因此article2的值就是getAllArticles()所解析的。如果您有一长串的.then方法，并且您的某些处理程序正在从早期的.then方法获取值，请确保您实际上将函数传递给.then 。

技巧3：传递带有形式参数的命名函数

在技巧＃2的基础上，我们可以传入定义单个形式参数（即，采用一个参数）的命名函数。这允许我们创建一些通用函数，可以在.then方法链内或以干净的方式在链外使用。

假设我们有一个函数getFirstArticle ，该函数进行API调用以获取集合中的最新文章，并解析为具有ID，标题和发布日期等属性的文章对象。然后说我们还有另一个函数getCommentsForArticleId ，该函数获取文章ID并进行API调用以获取与该文章相关的所有评论。现在，连接这两个函数所需要做的只是从第一个函数（商品对象）的解析度值到第二个函数（商品ID）的预期参数值。我们可以使用匿名内联函数来做到这一点：

getFirstArticle().then((article) => {
  return getCommentsForArticleId(article.id);
});

或者，我们可以创建一个简单的函数来获取文章，返回ID，并将所有内容与.then链接在一起：

let extractId = (article) => article.id;
getFirstArticle().then(extractId).then(getCommentsForArticleId);

由于未内联定义每个函数，因此看起来似乎模糊了每个函数的分辨率值，但是它创建了一些可能会被重用的灵活函数。还要注意的是，我们正在使用我们的疑难杂症＃1了解到：虽然extractId不返回一个承诺， .then会在一个承诺，这让我们称之为包裹它的返回值.then又来了！

还有其他绊倒点或答应分享的技巧吗？发表评论或在Twitter上与我开始对话。

From: https://www.infoworld.com/article/3329776/javascript-promises-3-gotchas-and-tricks-to-avoid-them.html