Question

当前，console.log()中的makeQuery()返回正确的对象，而console.log()中的scoop()返回“ undefined”作为response的定义scoop()不在等待对makeQuery()的函数调用返回。

我希望response中scoop()的定义在下面的代码运行之前等待对makeQuery()的函数调用。

我如何做到这一点？

var request = require('request');

const makeQuery = (query) => {
  request('http://0.0.0.0:4000/wikiweb?text=' + query, function (error, response, body) {
      var jason = JSON.parse(body)
      console.log(jason)
      return jason
    }
  )

class Wiki extends React.Component {



  constructor (props) {
    super(props)
    this.scoop = this.scoop.bind(this);
    this.state = {loaded: false}
  }

  scoop = async (e) => {
    e.preventDefault();
    var query = this.textInput.value;
    var response = await makeQuery(query);
    console.log(response)
    // await this.setState({data : response, loaded : true});
    // console.log(this.state.data)
  } 

...

Answer 1

您必须从makeQuery函数返回一个承诺，否则将不能使用await，它将立即解决。

示例

const makeQuery = query => {
  return new Promise(resolve => {
    request("http://0.0.0.0:4000/wikiweb?text=" + query, function(
      error,
      response,
      body
    ) {
      var json = JSON.parse(body);
      console.log(json);
      resolve(json);
    });
  });
};

class Wiki extends React.Component {
  constructor(props) {
    super(props);
    this.scoop = this.scoop.bind(this);
    this.state = { loaded: false };
  }

  scoop = async e => {
    e.preventDefault();
    var query = this.textInput.value;
    var response = await makeQuery(query);
    console.log(response);
  };

  // ...
}

Answer 2

在您当前的代码中，问题在于makeQuery（）正在请求URL，但没有等待URL的响应。您需要使makeQuery（）成为一个异步/等待函数。

var request = require('request');

const makeQuery = async (query) => {
  return new Promise((resolve, reject) => {
    request("http://0.0.0.0:4000/wikiweb?text=" + query, function (error,response,body) {

      if (error) {
        reject(error);
      }
      var json = JSON.parse(body);
      console.log(json);
      resolve(json);
    });
  })
}

class Wiki extends React.Component {



  constructor(props) {
    super(props)
    this.scoop = this.scoop.bind(this);
    this.state = { loaded: false }
  }

  scoop = async (e) => {
    e.preventDefault();
    var query = this.textInput.value;
    var response = await makeQuery(query);
    console.log(response)
    // await this.setState({data : response, loaded : true});
    // console.log(this.state.data)
  }
}

async / await在reactjs中不起作用（使用npx create-react-app）

2 个答案: