最后阻止angular 2 promise

Question

我觀察到在 angular 2 中沒有用於 promise API 的 finally 塊

角度 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;
};

假設我必須在 angular 2 中做同樣的事情

如何在angular 2 promise中添加finally塊，到目前為止，angular 2中只有then & catch blocks可用。如果不是finally，那么有沒有辦法在執行每個方法后添加清理代碼，我在哪里編寫代碼來做最后阻止活動？

Answer 1

最簡單的方法是使用promise.finally shim 。

• 添加npm install --save promise.prototype.finally
• 添加npm install --save-dev @types/promise.prototype.finally ： npm install --save-dev @types/promise.prototype.finally
• 在您的主類中，在引導應用程序之前，添加以下代碼：

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

您現在應該可以使用finally來兌現您的承諾。

Answer 2

這通常使用 Promise.always 來完成。 這需要一個函數，並在承諾上添加一個新的.then ，為成功和失敗狀態提供相同的函數。 如果該函數在給定的基於 Promise 的環境中不可用，則很容易填充。

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添加到tsconfig.json文件中的lib選項。

對於現代項目，您應該使用以下配置（這是 Angular 8 中的默認配置）：

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

這將修復您在編輯器中的輸入錯誤。

此外，根據文檔和我的觀察，Angular 編譯器會自動添加Promise.finally的正確Promise.finally ，您無需安裝或添加任何內容。

但是，一般來說，您可以使用core-js庫在./src/polyfills.ts文件中添加一個 polyfill（僅當它被證明是必需的）。 總是嘗試使用core-js而不是其他庫，因為它是一個行業標准，並且被 Angular 內部使用。

例如，可以像這樣添加Promise.finally ：

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

---

在core-js 文檔中查看更多信息。

此外，請務必閱讀 Angular 文檔的瀏覽器支持和差異加載文章。