fetch() 调用不返回任何数据

Question

我的 fetch() 调用无法正常工作时遇到问题。我有一个在此函数中调用自身的递归方法，但是一旦它通过 if 语句，数据本身就不会解析为下面的 .then() 调用。我想在这个函数中保留递归方法。因为调用此函数的系统会将 data.result 更改为非空的不同结果。我只是不知道什么时候会发生，因此这就是我使用递归方法的原因。

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

Answer 1

您需要 return getResult 和的递归调用避免 explicit Promise construction antipattern （只是 return Promise ):

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

现场演示：

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

您还应该考虑 - if 和 .then 末尾的 else if 可能不包含所有可能性。如果 data.result 既不是 null 也不是 'SUCCESS' 怎么办？根据您当前的逻辑，getResult 调用将导致 data 在消费者中成为 undefined。如果有可能发生这种情况，您可能想在这种情况下抛出错误或其他内容。

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

Answer 2

尝试使用 async...await，您的代码会简单得多

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

fetch() 调用不返回任何数据

fetch() call not returning any data

javascript

ajax

vue.js

fetch-api