console.log出力をdivに表示しようとしています。console.log関数をオーバーライドしてこれを行っています
オリジナルを使用するconsole.logと、コンソールにpromiseが次のように表示されます（以下のコードの1.を参照）。
Promise { <state>: "fulfilled", <value>: undefined }
私がそれをオーバーライドすると、divで取得します::
[object Promise]
（以下のコードの2を参照）
次のコードをどのように調整して、<state>プロパティを「main」divに表示しますか？
const pause = sec => new Promise(r => setTimeout(r, 1000 * sec))
// 1. Original console.log
;(async function(){
await new Promise(resolve => document.addEventListener('DOMContentLoaded', resolve));
let x = pause(0.5)
console.log(x)
await x;
console.log(x)
})();
// 2. Overridden console.log
;(async function(){
await new Promise(resolve => document.addEventListener('DOMContentLoaded', resolve));
await pause(1)
let divconsole = document.getElementById('main');
// Override console.log:
console.log = function () {
for (let i = 0; i < arguments.length; i++) {
if (typeof arguments[i] === 'object') {
divconsole.innerHTML += 'console.log arg ' + String(i) + ': ' + String(arguments[i]) + '<br>';
}
}
}
let y = pause(0.5)
console.log(y)
await y;
console.log(y)
})();<div id="main" style="width:100%;height:auto;background-color:lightblue;">
</div>私が尋ねている理由についてのメモ：私は、モバイルブラウザではなくデスクトップブラウザで解決する約束のあるコードを持っています。私はこれをデバッグしようとしています（一貫したモバイルデスクトップOSエコシステムなしで）。簡単な例で再現できれば、フォローアップの質問を書くかもしれません。
この他のSO回答からこのトリックを使用して、そのPromiseようなタイプの引数を処理できます。このトリックでは、カスタムconsole.logを次のように非同期にする必要があります。
function promiseState(p) {
const t = {};
return Promise.race([p, t])
.then(v =>
(v === t)? { state: "pending" } : { state: "fulfilled", value: v },
() => { state: "rejected" }
);
}
console.log = async function(...args) {
for (let arg of args) {
if (arg instanceof Promise) {
let state = await promiseState(arg);
divconsole.innerHTML += `Promise { <state>: "${ state.state }"${ state.state === "fulfilled" ? ', <value>: ' + state.value : '' } }<br>`;
} else if (typeof arg === 'object') {
divconsole.innerHTML += 'console.log arg: ' + String(arg) + '<br>';
}
// add more else-ifs to handle strings, numbers, booleans, ... etc
}
}
習慣console.logはasynchronous、約束を別の約束で包むためである必要があります。これがあなたがそれをすることができる唯一の方法です。
説明：
トリックはにあるrace約束p（利回りオブジェクトがいることを決議1に対する{}約束があれば）、p既に満たされ、その値が使用され、その値は他の約束（私たちはレースである1種のものと同じにすることはできませんので、に対して、をもたらすものに対して、{}私たちは約束が果たされたと判断します。私たちが得る価値が他の約束（オブジェクト{}）の価値であり、解決された約束がレースに勝ったことを意味する場合、約束pはまだ履行されていないことを確信できます。
エラーが発生した場合（catchコールバックが呼び出された場合）、promisepは拒否されます。
デモ：
function promiseState(p) {
const t = {};
return Promise.race([p, t])
.then(v =>
(v === t) ? { state: "pending" } : { state: "fulfilled", value: v },
() => { state: "rejected" }
);
}
console.log = async function(...args) {
let divconsole = document.getElementById('main');
for (let arg of args) {
if (arg instanceof Promise) {
let state = await promiseState(arg);
divconsole.innerHTML += `Promise { <state>: "${ state.state }"${ state.state === "fulfilled" ? ', <value>: ' + state.value : '' } }<br>`;
} else if (typeof arg === 'object') {
divconsole.innerHTML += 'console.log arg: ' + String(arg) + '<br>';
}
}
}
const pause = sec => new Promise(r => setTimeout(r, 1000 * sec));
;(async function() {
await new Promise(resolve => document.addEventListener('DOMContentLoaded', resolve));
await pause(1);
let divconsole = document.getElementById('main');
let y = pause(0.5);
await console.log(y);
await y;
await console.log(y);
})();<div id="main" style="width:100%;height:auto;background-color:lightblue;"></div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加