javascript - 如何从 getBoundingClientRect 中的 Promise Result 对象获取特定值？

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

如何left从对象 Promise Result 中获取价值？ coords.left;返回未定义

Answer 1

如果getBoundingClientRectAsync返回一个承诺，那么您可以使用它async / await来获取值。

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

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

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

在 MDN 上了解有关 Promises 的基础知识。