异步/等待在 reactjs 中不起作用（使用 npx create-react-app）[重复]

Question

目前，makeQuery() 中的console.log() 正在返回正确的对象，而scoop() 中的console.log() 正在返回“未定义”，因为scoop() 中response 的定义没有等待函数调用到makeQuery()返回。

我希望scoop() 中的response 的定义在下面的代码运行之前等待对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() 正在请求 URL，但没有等待来自 URL 的响应。你需要让 makeQuery() 也成为一个 async/await 函数。

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

Answer 2

您必须从makeQuery 函数返回一个promise，否则将没有使用await 的promise，它会立即解决。

示例

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

  // ...
}