通过其他方法在 JS class object 中运行异步方法？ [复制]

Question

这个问题在这里已经有了答案：

从 JavaScript 中的事件侦听器调用访问对象的属性6 个答案

如何在回调中访问正确的 `this` 13 个答案

24 分钟前关闭。

有一段时间没用过 JS 类，偶然发现了一个问题。

这是一个超级简单的代码：

class MyClass {
  constructor(apiUrl) {
    this.apiUrl = apiUrl;
    
    document.addEventListener('click', this.handleAction);
  }
  
  async getPosts() {
    const res = await fetch(this.apiUrl);
    const posts = await res.json();
        
    return posts;
  }
  
  handleAction() {
    this.getPosts.then((post) => {
      console.log(post);
    });
  }
}

const posts = new MyClass('https://jsonplaceholder.typicode.com/posts');

当我点击页面时， handleAction()这指向 #document并且事件指向PointerEvent ：

handleAction(e) {
  console.log(this); // #document
  console.log(e); // PointerEvent
  this.getPosts.then((post) => {
    console.log(post);
  });
}

这是有道理的，因为我们需要在这里绑定，对吧？ 所以正确的上下文被传递了。

所以，让我们这样做：

document.addEventListener('click', this.handleAction.bind(this), false);

所以现在这指向 MyClass object 及其所有方法：

handleAction(e) {
  console.log(this); // MyClass
  console.log(e); // PointerEvent
  this.getPosts.then((post) => {
    console.log(post);
  });
}

但即便如此，我还是得到了 Uncaught TypeError: this.getPosts.then is not a function即使 MyClass.getPosts 实际上是 function 并且我什至可以在 handleAction 中控制台记录它。

我在这里做错了什么？ 异步是问题吗？

JSFiddle： https://jsfiddle.net/791nmbux/ （单击任意位置并检查控制台）