Request hangs on pending in express

Question

I have the following in express:

app.post('/template-preview', (req, res) => {
    console.log(`here is req: ${req}`);
    res.send('it was hit');
    res.render('main', {layout : 'index'});
});

I then make the following call using Axios:

const getPreviewTemplate = async () => {
  console.log('in get previewtemplate')
  const result = await axios.post('http://localhost:5000/template-preview',
  {firstName: 'frank', lastName: 'gomez'}
);
  result.then(res => {
    console.log(res);
  })
  return result;
}

I can confirm the following works because I get the console.log('in get previewtemplate'); However after that it hangs. When I go to my network tab in chrome I see "pending" for the request. It stays like that.

I have this to handle cors in my express code before the route. Not sure if this is causing the issue: app.use(cors);

What am I doing wrong?

Answer 1

There are a number of mistakes here. It's hard to know for sure which one is causing your problem since you offer us no diagnostics at all other than "it hangs".

First, getPreviewTemplate() has NO error handling at all. If your axios.post() rejects, you have no code for logging it.

Second, const result = await axios.post() returns an actual result, NOT a promise. So, you can't do result.then() on it.

Third, console.log('here is req: ${req}'); won't help you because that will try to convert req to a string which will probably just be "[Object object]". Instead, you need to do: console.log('here is req: ', req); so you pass the whole object to console.log() and let it use its display smarts to show the object.

Fourth, app.use(cors); is supposed to be app.use(cors()); and that very well could be why every request gets stuck since next() never gets called.

Fifth, you only get to send one response for each incoming request so trying to do both res.send() and res.render() is just wrong. Pick one or the other, not both.

To summarize:

Change this:

app.use(cors)

to this:

app.use(cors());

Change this:

app.post('/template-preview', (req, res) => {
    console.log(`here is req: ${req}`);
    res.send('it was hit');
    res.render('main', {layout : 'index'});
});

to this:

app.post('/template-preview', (req, res) => {
    console.log('here is req: ', req);
    res.render('main', {layout : 'index'});
});

Change this:

const getPreviewTemplate = async () => {
  console.log('in get previewtemplate')
  const result = await axios.post('http://localhost:5000/template-preview',
  {firstName: 'frank', lastName: 'gomez'}
);
  result.then(res => {
    console.log(res);
  })
  return result;
}

to this:

const getPreviewTemplate = async () => {
  console.log('in get previewtemplate')
  const result = await axios.post(
      'http://localhost:5000/template-preview',
      {firstName: 'frank', lastName: 'gomez'}
  );
  console.log(result);
  // this will be the resolved value of the promise
  // that this async function returns
  return result;
}

Then, whoever is calling getPreviewTemplate() will get back a promise and will have to use either await or .then() on the promise they get back to get your actual result.