嵌套 .then() 并在 Javascript 承诺中捕获

Question

我对 Javascript 承诺没有经验，最近我开始在我的 Javascript 项目中使用承诺而不是回调。
当我尝试一个接一个地运行几个 Promise 函数时，我陷入了 then() 的嵌套混乱。代码完全按预期工作，但我的问题是，如果这是一个接一个地解决多个 Promise 函数的方法，那么使用 Promise 而不是回调有什么好处。
如果我没有以正确的方式做这件事，那么你们要求向我展示解决嵌套承诺的正确方法。 下面是我不喜欢它的代码：

exports.editExpense = (req, res, next) => {
    Account.findAll().then(accounts => {
        Budget.findAll().then(budgets => {
            Expense.findAll().then(expenses => {
                Expense.findByPk(id).then(expense => {
                    res.render('expenses/index', {
                        urlQuery: urlQuery,
                        expenses: expenses,
                        expense: expense,
                        accounts: accounts,
                        budgets: budgets
                    });
                })
            })
        })
    }).catch(error => console.log(error));
};

Answer 1

您可以使用async/await 结构以获得更好的格式

exports.editExpense = async(req, res, next) => {
    try {
      let accounts = await Account.findAll();
      let budgets = await Budget.findAll();
      let expenses = await Expense.findAll()
      let expense = await Expense.findByPk(id);
      if (expense) {
        res.render('expenses/index', {
          urlQuery: urlQuery,
          expenses: expenses,
          expense: expense,
          accounts: accounts,
          budgets: budgets
        });
      } else {
        console.log('else') //<<- Render/Handle else condition otherwise server will hang.
      }
    } catch (error) {
      console.error(error)
    }

您应该尽量减少在函数中调用async 的次数，因为这会影响您的性能。

Answer 2

如果您更喜欢使用then catch 结构，为了充分利用它，我建议您不要嵌套它们。当然可以，但是你应该在每个人后面加上一个.catch()。这就是为什么async 介绍使代码更易于阅读和处理错误，因为它使用try catch 结构简化了代码。

如果您通过管道传递多个.then()，您可以从每个.then() 返回一个值作为承诺，一旦承诺解决，就可以在下一个中使用该值。唯一的问题是您会丢失这些值，除非您将它们保存在带有新属性的 req 或在 .then() 的管道之外声明的变量中。

这就是为什么，在这个sn-p中，我在开头声明了所有变量，以便保存所有值并在最终res中使用它们

exports.editExpense = (req, res, next) => {
    
    let accounts;
    let budgets;
    let expenses;

    Account.findAll()
        .then(fetchedAccounts => {
            accounts = fetchedAccounts;
            return Budget.findAll()
        })
        .then(fetchedBudgets => {
            budgets = fetchedBudgets;
            return Expense.findAll()
        })
        .then(fetchedExpenses => {
            expenses = fetchedExpenses
            return Expense.findByPk(id)
        })
        .then(expense => {
            return res.render('expenses/index', {
                urlQuery: urlQuery,
                expenses: expenses,
                expense: expense,
                accounts: accounts,
                budgets: budgets
            });
        })
        .catch(error => console.log(error));
};