promise.then() returns Promise { }

Question

Function fetchData returns a promise and then I'm dealing with that promise in generateURL function by chaining the promise with .then however it returns Promise < pending >. Function generateURL should return a string What am I doing wrong?

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

const fetchData = async () => {
  return await fetch('https://jsonplaceholder.typicode.com/todos/1');
};

const generateURL = () => {
  const baseURL = 'https://cdn.test.com/';
  fetchData().then((res) => {
    const data = res.json();
    console.log('data', data);
    const id = data.id;
    console.log('id', id);
    const generatedURL = `${baseURL}${id}`;
    return generatedURL;
  });
};

`res.json()` returns a promise. You need to chain to the result with `.then()`. It's a common source of tripping people up. Using the async/await syntax in that function will make it cleaner. — Andy Ray, Jan 16 '21 at 21:52
`generateURL()` can not return a string since there is an asynchronous method generating that string — charlietfl, Jan 16 '21 at 21:55
but by using async/await in that function will only generate another promise as it is always returns a promise? — Alina Khachatrian, Jan 16 '21 at 21:56
Please check out the answers here (the first few are jquery-specific, the good answers are a bit further down): [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Zac Anger, Jan 16 '21 at 21:56

score 3 · Accepted Answer · answered Jan 16 '21 at 22:00

3

Reduced your code by a bit instead of adding multiple promise resolution

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

const everything = async () =>{
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const {id} = await response.json();
    return `https://cdn.test.com/${id}`
}
everything().then((res)=>console.log(res));

answered Jan 16 '21 at 22:00

Adithya Kamath

363
2
9

1

Thanks. But why though? – felixmp Apr 11 '22 at 15:22

score 1 · Answer 2 · answered Jan 16 '21 at 21:57

having a return await is an anti pattern https://eslint.org/docs/rules/no-return-await

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

const fetchData = () => {
  return fetch('https://jsonplaceholder.typicode.com/todos/1');
};

const generateURL = () => {
  const baseURL = 'https://cdn.test.com/';

  return fetchData().then((res) => {
    const data = res.json();
    console.log('data', data);
    const id = data.id;
    console.log('id', id);
    const generatedURL = `${baseURL}${id}`;

    return generatedURL;
  });
};

generateURL().then(result =>{
console.log(result)

})

score 1 · Answer 3 · answered Jan 16 '21 at 21:57

You should add another then() for the get result of json() as you can see on document https://www.npmjs.com/package/node-fetch#common-usage

So, it can be like below:

const generateURL = () => {
  const baseURL = 'https://cdn.test.com/';
   fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then(res => res.json())
   .then(data => {
      console.log('data', data);
      const id = data.id;
      console.log('id', id);
      const generatedURL = `${baseURL}${id}`;

      return generatedURL;
  });
};

If you still want to use fetchData function it doesn't need to be async-await, just return fetch because it already returns a Promise.

promise.then() returns Promise { }

3 Answers3

Related