javascript - 用于加载异步请求的附加类

Question

我正在构建一个 React 应用程序，我注意到我使用一个函数超过两次。所以我决定提取它并创建一个新类。它看起来像这样:

export default class Fetcher {
  constructor(url, callback) {
    this.url = url;
    this.callback = callback;
  }

  getData() {
    const url = '/wp-json/wp/v2/' + this.url;
    const req = new XMLHttpRequest();

    req.open('get', url, true);
    req.onreadystatechange = () => {
      if(req.readyState === 4) {
        if(req.status === 200) {
          this.callback();
          return req.responseText;
        } else {
          throw new Error();
        }
      }
    }
    req.send();
  }
}

我这样使用它:

  import Fetcher from '../Tools/XML';
  fetchPost() {
    const data = new Fetcher('posts?slug='+this.props.params.slug, this.renderPost);
    console.log(data.getData());
  }

我的问题是，console.log 返回undefined。我理解发生这种情况是因为请求是异步的，并且渲染在查询完成之前完成。

我的问题是，我该如何克服这个问题？

Answer 1

您需要使用回调，因为异步工作时无法直接返回值。

在 getData() 方法中，更改此行:

this.callback();

对此:

this.callback(req.responseText);

然后将console.log放入回调函数中:

renderPost(responseText) {
    console.log(responseText);
}