ここでの回答の多くは、この記事の最後の例に似ています。私は複数のPromiseをキャッシュしresolve()
ていreject()
ますが、および関数は任意の変数またはプロパティに割り当てることができます。その結果、このコードをわずかにコンパクトにすることができます。
function defer(obj) {
obj.promise = new Promise((resolve, reject) => {
obj.resolve = resolve;
obj.reject = reject;
});
}
このバージョンのdefer()
を使用してFontFace
load Promiseを別の非同期プロセスと組み合わせる簡単な例を次に示します。
function onDOMContentLoaded(evt) {
let all = []; // array of Promises
glob = {}; // global object used elsewhere
defer(glob);
all.push(glob.promise);
// launch async process with callback = resolveGlob()
const myFont = new FontFace("myFont", "url(myFont.woff2)");
document.fonts.add(myFont);
myFont.load();
all.push[myFont];
Promise.all(all).then(() => { runIt(); }, (v) => { alert(v); });
}
//...
function resolveGlob() {
glob.resolve();
}
function runIt() {} // runs after all promises resolved
更新:オブジェクトをカプセル化する場合の2つの選択肢:
function defer(obj = {}) {
obj.promise = new Promise((resolve, reject) => {
obj.resolve = resolve;
obj.reject = reject;
});
return obj;
}
let deferred = defer();
そして
class Deferred {
constructor() {
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
}
}
let deferred = new Deferred();
Promise
、2つの関数を「エクスポート」できるように同期的に実行する必要があると指定されていると思います。