async/await not working in reactjs (used npx create-react-app)

Question

Currently, the console.log() in makeQuery() is returning the correct object while the console.log() in scoop() is returning "undefined" as the definition of response in scoop() is not waiting for the function call to makeQuery() to return.

I would like for the definition of response in scoop() to wait for the function call to makeQuery() before the code below runs.

How do I make this happen?

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

...

You do not return anything from `makeQuery` and as of that the returned value `undefined`. — t.niese, Aug 01 '18 at 17:01

Tholle · Accepted Answer · 2018-08-01T17:03:32.957

4

You have to return a promise from the makeQuery function or there will be no promise to use await on and it will resolve immediately.

Example

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

  // ...
}

edited Aug 01 '18 at 17:03

answered Aug 01 '18 at 17:01

Tholle

108,070
19
198
189

This causes the request to return though, not the body of the request. – Tadeo Yelos Aug 01 '18 at 17:11
1

@TadeoYelos That's not true. I'm resolving the promise with the response, `resolve(json);` – Tholle Aug 01 '18 at 17:12
1

Yeah, you're right actually. Thanks so much for your help! – Tadeo Yelos Aug 01 '18 at 17:15

Sujil Maharjan · Answer 2 · 2018-08-01T17:14:36.920

In your current code, the problem is that makeQuery() is requesting to the URL but not waiting for the response from the URL. You need to make makeQuery() also an async/await function.

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

`request` doesn't return a promise, so `await request('http://0.0.0.0:4000/wikiweb?text=' + query);` will not work as expected. — Tholle, Aug 01 '18 at 17:10

async/await not working in reactjs (used npx create-react-app)

2 Answers2