链接 HTTP 承诺时如何调用 catch 方法？

Question

我为我的 Angular 应用程序创建了一个自定义 loaderService，它在后端处理请求（或一组请求）时提供加载微调器。这是我的代码：

export class ComponentOne {
  constructor(loaderService: LoaderService, orderService: OrderService) {}
  ...
  ...
  method() {
    this.loaderService.display(true);
    this.orderService.firstRequest()
      // the misspelled word causes a 500 error
      .then((response) => this.orderService.methodWithWrongInput('misspelled_word'))
      // but it still executes the following then
      .then(() => this.method2())
      .catch(() => null)
      .then(() => this.loaderService.display(false));
  }
  ...
}

我在请求之前显示微调器，但无论请求成功还是失败，我都想确保关闭它。这就是为什么我在底部放一个catch 和最后一个then。代码运行良好，但是当我调试它时，我意识到即使第二个请求（故意拼错的单词）失败，method2() 仍然被调用。还是真的失败了？

我的问题是，catch 方法在链接请求时如何工作。我以为如果请求失败，我们直接去 catch 方法，但我可能错了。

编辑： 原来我对 method2() 的调用是错误的。见 T.J.克劳德的回答更多。

Answer 1

...我意识到即使第二个请求（故意拼错单词）失败，method2() 仍然被调用...

我怀疑您误解了您在调试器中看到的内容，在这种情况下很容易做到。

在这段代码中：

method() {
  this.loaderService.display(true);
  this.orderService.firstRequest()
    // the misspelled word causes a 500 error
    .then((response) => this.orderService.methodWithWrongInput('misspelled_word'))
    // but it still executes the following then
    .then(() => this.method2())
    .catch(() => null)
    .then(() => this.loaderService.display(false));
}

会发生什么：

1. this.loaderService.display(true); 运行
2. this.orderService.firstRequest() 运行并返回一个承诺
3. .then((response) => this.orderService.methodWithWrongInput('misspelled_word')) 运行 - 不是回调中的部分，只是 then。它在 Promise 上注册一个解析处理程序并返回一个新的 Promise。
4. .then(() => this.method2()) 运行——再次，只是 then 调用，而不是它的回调。它返回另一个新的承诺。
5. .catch(() => null) 运行 - 再次，只是 catch 调用，而不是它的回调。它返回另一个新的承诺。
6. .then(() => this.loaderService.display(false)) 运行 - 再次，只是 then 调用，而不是它的回调。它返回另一个新的承诺。

然后稍后，来自firstRequest() 的承诺解决，并且

1. (response) => this.orderService.methodWithWrongInput('misspelled_word') 运行并返回一个新的承诺

然后稍后，该承诺拒绝，并且

8. () => null（在您的 catch 处理程序中）运行并返回 null，它解决了相关的承诺（例如，将拒绝转换为解决方案）
9. () => this.loaderService.display(false) 运行，因为此时链已解决（未拒绝）（感谢上面的#8）

因此，在调试器中，您将看到执行光标跨过then 对method2 的调用，在上面的初始序列（#4）中同步设置链；但这只是将处理程序添加到链中。您不会看到method2 实际被调用，因为当解决/拒绝发生时（在methodWithWrongInput 拒绝的情况下）不会触发回调