如何从 getBoundingClientRect 中的 Promise Result Object 获取特定值？

Question

这是我返回 Promise 的代码的一部分，我正在使用 getBoundingClientRect Async，因为它在 AMP 虚拟 DOM（amp-script）中运行：

JS:

    button.addEventListener("mouseenter", function(event){
    
       let target = event.target;

       let coords = target.getBoundingClientRectAsync();
       
       console.log(coords);

    });

控制台日志：

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object
bottom: 366
height: 38
left: 225
right: 352.234375
top: 328
width: 127.234375
x: 328
y: 225
__proto__: Object

如何从对象 Promise Result 中获取 left 的值？ coords.left; returns 未定义

Answer 1

如果 getBoundingClientRectAsync returns 一个承诺，那么你可以使用 async / await 来获取价值。

button.addEventListener("mouseenter", async function(event){
  let target = event.target;
  let coords = await target.getBoundingClientRectAsync();
  console.log(coords.left);
});

或者使用返回的 Promise 的 then 方法并设置一个回调，当 Promise 解析时，您的 coords 对象可用。

button.addEventListener("mouseenter", function(event){
  let target = event.target;
  target.getBoundingClientRectAsync().then(coords => {
    console.log(coords.left);
  });
});

了解有关 Promises 的基础知识 here on MDN。

如何从 getBoundingClientRect 中的 Promise Result Object 获取特定值？

How to get specific value from Promise Result Object in getBoundingClientRect?

javascript

asynchronous

virtual-dom

getboundingclientrect

ampscript