web-dev-qa-db-ja.com

最後にangular 2 promiseでブロックします

angular 2では、Promise 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;
};

angular 2で同じことをする必要があると仮定します

angular 2 promiseに最終的にブロックを追加する方法。現在のところ、then & catch blocks angular 2.で利用可能です。2。最終的にそうでない場合、各メソッドの実行後にクリーンアップコードを追加する方法はありますか?最終的にアクティビティをブロックするコードをどこに記述しますか?

16
Dmehro

これを行う最も簡単な方法は、 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を使用できるようになります。

15
Tom Spencer

これは通常、Promise.alwaysを使用して行われます。これは1つの関数を受け取り、成功と失敗の両方の状態で同じ関数を提供するpromiseに新しい.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;
1
Katana314

2019-2020年の最新ソリューション

まず第一に、正当な理由なしに手動でポリフィルを追加することは避けてください。どこかで読んだことがあるので、盲目的に行わないでください。

発生する問題には、型宣言と実装という2つの側面があります。

入力エラーなしでコードでPromise.finallyを使用するには、es2018.promiseファイルのlibオプションにtsconfig.jsonを追加する必要があります。

最新のプロジェクトでは、次の構成を使用する必要があります(Angular 8ではデフォルト):

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

これにより、エディターでの入力エラーが修正されます。

また、ドキュメントと私の観察によれば、Promise.finallyの正しいポリフィルはAngularコンパイラによって自動的に追加されるため、何もインストールまたは追加する必要はありません。

ただし、一般的には、./src/polyfills.tsライブラリを使用して、core-jsファイルにポリフィルを追加することができます(必要な場合のみ)。他のライブラリの代わりに常にcore-jsを使用するようにしてください。これは業界標準であり、Angular内部で使用されているためです。

たとえば、Promise.finally polyfillは次のように追加できます。

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


詳細は core-jsのドキュメント を参照してください。

また、Angularドキュメントの browser-support および differential-loading の記事を必ずお読みください。

0
Slava Fomin II