我正在尝试显示 console.log
在 div 中输出。我通过覆盖 console.log
来做到这一点功能
当我使用原始 console.log
,一个 promise 在控制台中显示为(参见下面代码中的 1.):
Promise { <state>: "fulfilled", <value>: undefined }
当我超越它时,我在 div: 中得到: [object Promise]
(见下面代码中的 2.)您将如何调整以下代码以获得
<state>
属性显示在“主” 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>
关于我为什么要问的说明:我的代码带有可以在桌面浏览器而不是移动浏览器中解析的 promise 。我正在尝试对此进行调试(没有一致的移动桌面操作系统生态系统)。如果我可以在一个简单的例子中复制它,我可能会写一个后续问题。
最佳答案
您可以使用 this other SO answer 中的这个技巧处理类型为 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
因为它将 promise 包装在另一个 promise 中。这是您可以做到的唯一方法。解释:
诀窍是
race
promise p
反对一个已解决的(产生一个对象 {}
),如果 promise p
已经实现它的值将被使用,并且由于它的值不能与另一个 promise 的值相同(我们正在与之竞争的那个,产生 {}
的那个),我们确定该 promise 已经实现。如果我们得到的值是另一个promise(对象{}
)的值,这意味着我们解决的promise赢得了比赛,我们可以确定promise p
尚未兑现。如果我们得到一个错误(意味着
catch
回调被调用), promise 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>
关于javascript - 覆盖 console.log 时如何显示 Promise 对象的状态和值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64556248/