JS node-fetch can't get data from a fetch promise

Question

I want to fetch data from the wikipedia api via node-fetch. Unfortunately I don't manage to set a variable outside my fetch-Promise-Chain. I wanted to pass this variable on to render page to fill in a form. If I consle.log the inside the fetch() everything works as I'd expected.

I am new to this and I admit that I don't understand how promises work or how to get practice on this topic.

    const fetch = require('node-fetch');

exports.search = (req,res) =>{
  console.log('going to search...' + req.query.eventSearchbar);
  
  let searchterm = req.query.eventSearchbar;
  let wikiDescription = 'Test';
  
  const wikiAPI = "https://en.wikipedia.org/w/api.php";
  let searchURL = new URL(wikiAPI)
  searchURL += "?origin=*&action=query&list=search&srlimit=1&format=json&srprop=snippet&srsearch=";
  searchURL += encodeURIComponent(req.query.eventSearchbar);
  console.log(searchURL);

  fetch(searchURL)
    .then(res => res.json())
    .then(json => json.query.search)
    .then(array => array[0].snippet)
    .then(snippet => {
      wikiDescription  = snippet;
    })
    .catch(err => console.log(err))

  res.render('search',{searchterm: searchterm, wikiDescription: wikiDescription });
}

probably becouse. res.render() called before FETCH ends its process. basically you need to render after FETCH ends it job — mohamed khounti, Feb 20 '21 at 20:20

Ran Turner · Accepted Answer · 2021-02-20T20:25:41.713

You need to await the fetch in order for it to work as you expect it to be.

When your JS code does an Ajax request over the network to get data from the server, you need to set up the response code in a function (which is also called callback).The JS Engine basiclly tells the hosting environment that he is going to suspend the execution for the moment and when the network response arrives back, please let me know and execute that callback function.

So' in your example, you're making an asynchronous request via fetch. the response will get sometime after you make it but if you won't await that call, the

res.render('search',{searchterm: searchterm, wikiDescription: wikiDescription });

will surely happen before you get the result back.

It was that! PLUS... making the exports.search = (req,res) =>{…} exports.search = async (req,res) =>{ — Erikson_Nordenson, Feb 20 '21 at 20:23

score 0 · Answer 2 · answered Feb 20 '21 at 20:33

final result:

exports.search = async (req,res) =>{
  console.log('going to search...' + req.query.eventSearchbar);
  /**
   * let's build our search query for basic pageinformation
   */
  let searchterm = req.query.eventSearchbar;
  let wikiDescription = 'Test';
  // where we are going to look...
  const wikiAPI = "https://en.wikipedia.org/w/api.php";
  // let's build aóur search url
  let searchURL = new URL(wikiAPI)
  searchURL += "?origin=*&action=query&list=search&srlimit=1&format=json&srprop=snippet&srsearch=";
  searchURL += encodeURIComponent(req.query.eventSearchbar);
  console.log(searchURL);
  //fetch some data from wikipedia
  await fetch(searchURL)
    .then(res => res.json())
    .then(json => json.query.search)
    .then(array => array[0].snippet)
    .then(snippet => {
      wikiDescription  = snippet;
    })
    .catch(err => console.log(err))

  res.render('search',{searchterm: searchterm, wikiDescription: wikiDescription });
}

If you want to use `async`/`await` syntax, don't use `then` callbacks. Write `const res = await fetch(searchURL); const json = await res.json(); const wikiDescription = json.query.search[0].snippet;` — Bergi, Feb 20 '21 at 21:10

JS node-fetch can't get data from a fetch promise

2 Answers2