これは現実世界の問題ではなく、単に Promise がどのように作成されるかを理解しようとしているだけです。
setTimeout のように何も返さない関数に対して promise を作成する方法を理解する必要があります。
以下のものがあるとします:
function async(callback){
setTimeout(function(){
callback();
}, 5000);
}
async(function(){
console.log('async called back');
});
の準備ができasyncたら を返すことができるpromise を作成するにはどうすればよいですか?setTimeoutcallback()
それを包めばどこかに連れて行かれるだろうと思った。
function setTimeoutReturnPromise(){
function promise(){}
promise.prototype.then = function() {
console.log('timed out');
};
setTimeout(function(){
return ???
},2000);
return promise;
}
しかし、これ以上は考えられません。
ベストアンサー1
アップデート（2017）
2017年現在、PromiseはJavaScriptに組み込まれており、ES2015仕様によって追加されました（IE8-IE11などの古い環境ではポリフィルが利用可能です）。採用された構文は、コンストラクタに渡すコールバックを使用しますPromise（Promise 執行者) は、Promise を解決/拒否するための関数を引数として受け取ります。
まず、asyncJavaScriptで意味を持つようになったlater(特定のコンテキストではキーワードに過ぎませんが)、混乱を避けるために関数の名前として使用します。
基本的な遅延
ネイティブの Promise (または忠実なポリフィル) を使用すると、次のようになります。
function later(delay) {
return new Promise(function(resolve) {
setTimeout(resolve, delay);
});
}
setTimeoutこれは、に準拠したバージョンのブラウザの定義where はsetTimeout、間隔の後に引数を指定しない限り、コールバックに引数を渡しません (これは、ブラウザー以外の環境では当てはまらない可能性があり、Firefox では以前は当てはまりませんでしたが、現在は当てはまります。Chrome では当てはまり、IE8 でも当てはまります)。
値による基本的な遅延
関数でオプションで解像度の値を渡すようにしたい場合は、遅延後に追加の引数を渡して、呼び出されたときにそれらをコールバックに渡すことができる、比較的新しいブラウザーであれば、setTimeoutこれを実行できます (現在の Firefox と Chrome、IE11+、おそらく Edge)。ないIE8 または IE9、IE10 については不明):
function later(delay, value) {
return new Promise(function(resolve) {
setTimeout(resolve, delay, value); // Note the order, `delay` before `value`
/* Or for outdated browsers that don't support doing that:
setTimeout(function() {
resolve(value);
}, delay);
Or alternately:
setTimeout(resolve.bind(null, value), delay);
*/
});
}
ES2015+ の矢印関数を使用している場合は、より簡潔になります。
function later(delay, value) {
return new Promise(resolve => setTimeout(resolve, delay, value));
}
あるいは
const later = (delay, value) =>
new Promise(resolve => setTimeout(resolve, delay, value));
キャンセル可能な遅延と値
タイムアウトをキャンセルできるようにしたい場合、laterPromise はキャンセルできないため、 から Promise を返すだけでは不十分です。
cancelしかし、 Promise のメソッドとアクセサーを持つオブジェクトを簡単に返し、キャンセル時に Promise を拒否することができます。
const later = (delay, value) => {
let timer = 0;
let reject = null;
const promise = new Promise((resolve, _reject) => {
reject = _reject;
timer = setTimeout(resolve, delay, value);
});
return {
get promise() { return promise; },
cancel() {
if (timer) {
clearTimeout(timer);
timer = 0;
reject();
reject = null;
}
}
};
};
実際の例:
const later = (delay, value) => {
let timer = 0;
let reject = null;
const promise = new Promise((resolve, _reject) => {
reject = _reject;
timer = setTimeout(resolve, delay, value);
});
return {
get promise() { return promise; },
cancel() {
if (timer) {
clearTimeout(timer);
timer = 0;
reject();
reject = null;
}
}
};
};
const l1 = later(100, "l1");
l1.promise
.then(msg => { console.log(msg); })
.catch(() => { console.log("l1 cancelled"); });
const l2 = later(200, "l2");
l2.promise
.then(msg => { console.log(msg); })
.catch(() => { console.log("l2 cancelled"); });
setTimeout(() => {
l2.cancel();
}, 150);2014年のオリジナル回答
通常、Promise ライブラリ (自分で作成したもの、またはいくつかあるライブラリの 1 つ) があります。そのライブラリには通常、作成して後で「解決」できるオブジェクトがあり、そのオブジェクトから取得できる「Promise」があります。
すると、later次のようになります。
function later() {
var p = new PromiseThingy();
setTimeout(function() {
p.resolve();
}, 2000);
return p.promise(); // Note we're not returning `p` directly
}
この質問に対するコメントで、私はこう尋ねました。
独自の Promise ライブラリを作成しようとしていますか?
そしてあなたは言った
私はそうではありませんでしたが、今となってはそれが私が理解しようとしていたことだったと思います。図書館がそれをどうするか
その理解を助けるために、ここにとても基本的なこれは Promises-A にまったく準拠していない例です。ライブコピー
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Very basic promises</title>
</head>
<body>
<script>
(function() {
// ==== Very basic promise implementation, not remotely Promises-A compliant, just a very basic example
var PromiseThingy = (function() {
// Internal - trigger a callback
function triggerCallback(callback, promise) {
try {
callback(promise.resolvedValue);
}
catch (e) {
}
}
// The internal promise constructor, we don't share this
function Promise() {
this.callbacks = [];
}
// Register a 'then' callback
Promise.prototype.then = function(callback) {
var thispromise = this;
if (!this.resolved) {
// Not resolved yet, remember the callback
this.callbacks.push(callback);
}
else {
// Resolved; trigger callback right away, but always async
setTimeout(function() {
triggerCallback(callback, thispromise);
}, 0);
}
return this;
};
// Our public constructor for PromiseThingys
function PromiseThingy() {
this.p = new Promise();
}
// Resolve our underlying promise
PromiseThingy.prototype.resolve = function(value) {
var n;
if (!this.p.resolved) {
this.p.resolved = true;
this.p.resolvedValue = value;
for (n = 0; n < this.p.callbacks.length; ++n) {
triggerCallback(this.p.callbacks[n], this.p);
}
}
};
// Get our underlying promise
PromiseThingy.prototype.promise = function() {
return this.p;
};
// Export public
return PromiseThingy;
})();
// ==== Using it
function later() {
var p = new PromiseThingy();
setTimeout(function() {
p.resolve();
}, 2000);
return p.promise(); // Note we're not returning `p` directly
}
display("Start " + Date.now());
later().then(function() {
display("Done1 " + Date.now());
}).then(function() {
display("Done2 " + Date.now());
});
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
})();
</script>
</body>
</html>