2019-2020年的现代解决方案

Question

我观察到在角度2中，没有最终的承诺API块

棱角1：

 loadUsers() {
  fetch('/api/users').then((response) => {
    return response.json();
  }).then((data) => {
    this.users = data;
  }).catch((ex) => {
    console.error('Error fetching users', ex);
  }).finally(() => {
     this.userLoaded = true;
};

假设我必须在角度2中做同样的事情

如何在角度2承诺中添加finally块，截至目前在角度2中只有then & catch blocks可用。如果不是最后那么有没有办法在执行每个方法后添加清理代码，我在哪里编写代码来做最后阻止活动吗？

Answer 1

最简单的方法是使用promise.finally shim。

使用npm install --save promise.prototype.finally
添加类型：npm install --save-dev @types/promise.prototype.finally
在主类中，在引导应用程序之前，添加以下代码：

import { shim } from 'promise.prototype.finally';
shim();

您现在应该可以在您的承诺上使用finally。

Answer 2

这通常使用Promise.always完成。这需要一个函数，并在promise上添加一个新的.then，为成功和失败状态提供相同的功能。如果在给定的基于承诺的环境中该功能不可用，则可以很容易地填充。

Promise.always = function(p, fn) {
  return p.then(fn, fn);
}

用法：

var prom = fetch('/api/users').then...
Promise.always(prom, () => {
  this.userLoaded = true;
});
return prom;

Answer 3

2019-2020年的现代解决方案

首先，您应该避免在没有充分理由的情况下手动添加polyfill，不要盲目操作，因为您已经在某处阅读了它。

您遇到的问题有两个方面：输入声明和实现。

为了在代码中使用Promise.finally而没有键入错误，您应该在es2018.promise文件的lib选项中添加tsconfig.json。

对于现代项目，应使用以下配置（Angular 8中的默认配置）：

{
  "compilerOptions": {
    …
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

这将解决您在编辑器中遇到的键入错误。

此外，根据文档和我的观察，Angular编译器会自动为Promise.finally添加正确的polyfill，而无需安装或添加任何东西。

但是，通常，您可以使用./src/polyfills.ts库在core-js文件中添加一个polyfill（仅在证明是必需的情况下）。始终尝试使用core-js而不是其他库，因为它是行业标准，并且已由Angular内部使用。

例如，可以像这样添加Promise.finally polyfill：

import 'core-js/features/promise/finally';

在core-js documentation上了解更多。

此外，请确保阅读Angular文档中的browser-support和differential-loading文章。

最后阻止角度2承诺

3 个答案:

2019-2020年的现代解决方案