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。最終的にそうでない場合、各メソッドの実行後にクリーンアップコードを追加する方法はありますか?最終的にアクティビティをブロックするコードをどこに記述しますか?
これを行う最も簡単な方法は、 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
を使用できるようになります。
これは通常、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;
まず第一に、正当な理由なしに手動でポリフィルを追加することは避けてください。どこかで読んだことがあるので、盲目的に行わないでください。
発生する問題には、型宣言と実装という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 の記事を必ずお読みください。