我正在尝试console.log在div中显示输出。我通过重写console.log功能来做到这一点
当我使用原始版本时console.log，诺言会在控制台中显示为（请参见下面代码中的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（产生对象{}）的承诺，如果承诺p已经实现，则将使用其价值，并且由于其价值不能与另一个承诺（我们正在努力的那个）相同相对于产生的那一个{}），我们确定诺言已经兑现。如果我们获得的价值是另一个诺言（对象{}）的价值，这意味着我们已解决的诺言赢得了比赛，那么我们可以确定诺言p尚未兑现。
如果我们收到错误消息（意味着catch回调被调用），则承诺将p被拒绝。
演示：
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] 删除。
我来说两句