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);
}

Answer 2

XMLHttpRequest API使用相同的命名构造函数来根据MDN进行异步调用：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#XMLHttpRequest。

在您的场景中，您正在使用此api，但是api无法直接向调用者返回任何数据，因为getData()不会向调用者返回任何内容，这是一种异步方法。因为，你有一个callback()，使用它来使用

将异步调用的结果传递给它的调用者

this.callback(req.responseText);

因此，一旦方法完成，回调将作为参数传递responseText。为了处理该更改，将回调的方法签名接受为：

renderPost (responseText) {
  // Use the response now 
  console.log(responseText);
}

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

2 个答案: