fetch() call not returning any data

Question

I'm having a problem with my fetch() call not working correctly. I have a recursion method that calls itself within this function, but once it passes the if statement, the data itself is not being resolved to the .then() call below. I would like to keep the recursion method within this function. Because the system that this function is calling will change the data.result to a different result that is not null. I just don't know when that will happen, hence that is why I'm using the recursion method.

var someToken = "actually token";

function getResult(getToken) {
  return new Promise((resolve, reject) => {
    fetch(url, {
      headers: {
        "Authorization": something,
        "Jenkins-Crumb": getToken
      },
      redirect: 'follow',

    }).then(response => {
      return response.json()

    }).then(data => {

      if (data.result == null) {
        console.log('retrieving data')
        getResult(getToken)
      } else if (data.result == "SUCCESS") {
        console.log('success')
        resolve(data)
      }

    }).catch(err => {
      reject(err)
    })
  })
}

getResult(someToken).then(data => {
  console.log(data)
}).catch(err => console.log(err))

This might be a duplicate of https://stackoverflow.com/questions/27691547/recursive-function-does-not-return-specified-value but I'm not sure if that's right for async code. — Barmar, Jan 31 '20 at 22:43
Returning the recursive `getResult` alone wouldn't be enough because he's using the explicit Promise construction antipattern — CertainPerformance, Jan 31 '20 at 22:43

CertainPerformance · Answer 1 · 2020-02-02T05:23:36.800

You need to return the recursive call of getResult and avoid the explicit Promise construction antipattern (just return the Promises instead):

function getResult(getToken) {
  return fetch(url, {
    headers: {
      "Authorization": something,
      "Jenkins-Crumb": getToken
    },
    redirect: 'follow',
  })
    .then(response => response.json())
    .then(data => {
      if (data.result == null) {
        console.log('retrieving data');
        return getResult(getToken); // <-----------------------------
      } else if (data.result == "SUCCESS") {
        console.log('success');
        return data; // <-------------------------------------------
      }
      // What if data.result is neither null nor SUCCESS?  <--------
    });
}

getResult(someToken).then(data => {
  console.log(data);
}).catch(err => console.log(err))

Live demo:

const getUrl = () => Math.random() < 0.25 ? 'data:,{"result":"SUCCESS"}' : 'data:,{}';

function getResult(getToken) {
  return fetch(getUrl(), {
    headers: {
      "Authorization": 'something',
      "Jenkins-Crumb": getToken
    },
    redirect: 'follow',
  })
    .then(response => response.json())
    .then(data => {
      if (data.result == null) {
        console.log('retrieving data');
        return getResult(getToken); // <-----------------------------
      } else if (data.result == "SUCCESS") {
        console.log('success');
        return data; // <-------------------------------------------
      }
      // What if data.result is neither null nor SUCCESS?  <--------
    });
}

getResult('someToken').then(data => {
  console.log(data);
}).catch(err => console.log(err))

You should also consider - your if and else ifs at the end of the .then may not encompass all possibilities. What if data.result is neither null nor 'SUCCESS'? Given your current logic, the getResult call will result in data being undefined in the consumer. If there's a chance of that happening, you might want to throw an error or something in that case.

if (data.result == null) {
  console.log('retrieving data')
  return getResult(getToken) // <-----------------------
} else if (data.result == "SUCCESS") {
  console.log('success')
  return data; // <-----------------------
}
throw new Error('data.result is neither null nor 'SUCCESS'');

I tried using this method but it didn't return the data that I wanted in the function below. But thank you so much for the help. Maybe I didn't use your solution correctly. — dacD, Feb 02 '20 at 03:38
Works fine here, see snippet and https://jsfiddle.net/6jutqna5/ — CertainPerformance, Feb 02 '20 at 05:23

score 2 · Accepted Answer · answered Jan 31 '20 at 22:50

try using async...await and your code will be much simpler

var someToken = "actually token";

async function getResult(getToken) {
  const resp = await fetch(url, {
    headers: {
      "Authorization": something,
      "Jenkins-Crumb": getToken
    },
    redirect: 'follow',
  });
  const data = await resp.json();
  if (data.result == null) {
    console.log('retrieving data')
    return getResult(getToken)
  } else if (data.result == "SUCCESS") {
    console.log('success')
    return data;
  }
}

getResult(someToken).then(data => {
  console.log(data)
}).catch(err => console.log(err))

This actually works for code. Thank you so much for your help. — dacD, Feb 02 '20 at 03:37

fetch() call not returning any data

2 Answers2

Linked