Question

以下代码运行良好，并从控制台登录到网站（以json格式输出一个简单文件）：

getData = url => {
  fetch(url)
    .then(response => {
      if (response.status !== 200) {
        console.log(
          "Looks like there was a problem. Status Code: " + response.status
        );
        return; //returns undefined!
      }

      // Examine the text in the response
      response.json().then(data => {
        console.log(data);
      });
    })
    .catch(function(err) {
      console.log("Fetch Error :-S", err);
    });
};

getData(urlToFetch); // logs to console the website call: a json file

我想将fetch的内容值存储在变量中供以后使用。

所以，当我改变时：

console.log(data);

为：

return data;

我得到一个未定义的。有什么帮助吗？

Answer 1

因为你的getData函数中.catch如果出现其他问题，你的函数也会解析undefined。如果你想记录它，那么你需要将错误作为拒绝承诺返回，这样调用者就可以处理错误，并且在promise解析时不会获得数据的未定义值。

您可以return Promise.reject("no 200 status code")拒绝和return response.json()解决问题如果您想添加.then(x=>console.log(x))，您仍然需要返回一些内容，或者调用getData的内容将解析为undefined：

getData = url => {
  fetch(url)
    .then(response => {
      if (response.status !== 200) {
        console.log(
          "Looks like there was a problem. Status Code: " + response.status
        );
        return Promise.reject(//reject by returning a rejecting promise
          "Looks like there was a problem. Status Code: " + response.status
        );
      }

      // Examine the text in the response
      response.json().then(data => {
        console.log(data);
        return data;//still need to return the data here
      });
    })
    .catch(function (err) {
      console.log("Fetch Error :-S", err);
      //return the reject again so the caller knows something went wrong
      return Promise.reject(err);
    });
};

getData(urlToFetch) // logs to console the website call: a json file
.then(
  x=>console.log("caller got data:",x)
)
.catch(
  e=>console.log("caller got error:",e)
);

Answer 2

return; //returns undefined!

您没有返回任何内容，因此return本身会返回undefined，除非您为其提供值。

您需要存储承诺，当您需要值时，您必须解决它。我会改变这个：

 // Examine the text in the response
  response.json().then(data => {
    console.log(data);
  });

到此：

 // Examine the text in the response
  return response.json();

然后调用getData并解析promise：

getData(urlToFetch).then(data => {
    // Code to use data
})

或者将promise存储在变量中并稍后使用：

let result = getData(urlToFetch);

result.then(data => {
    // so whatever with data
  });

Answer 3

您可以使用ES6 async-await轻松完成此操作：

使用异步等待，您的代码将如下所示：

function getData(url){
  return new Promise((resolve, reject) => {
   fetch(url)
    .then(response => {
      if (response.status !== 200) {
        console.log(
          "Looks like there was a problem. Status Code: " + response.status
        );
        return; //returns undefined!
      }

      // Examine the text in the response
      response.json().then(data => {
        resolve(data);
      });
    })
    .catch(function(err) {
      console.log("Fetch Error :-S", err);
      reject(err)
    });
 })
}

// Then call the function like so:

async function useData(){
  const data = await getData(urlToFetch);

  // console.log(data) ===> result;
}

Answer 4

这里发生的是，您处于then阻止之下。你的getData函数在调用fetch后立即返回数据。它不会等待异步提取操作来接收回调，然后再调用函数。

因此返回内部函数无需返回。这就是为什么它不起作用的原因。

相反，您可以从getData函数返回一个promise并在其上调用then来获取数据。我不久前遇到了类似的问题。

一个例子:(未经测试）

getData = url => {
  new Promise(function (resolve, reject) {
   fetch(url)
    .then(response => {
      if (response.status !== 200) {
        console.log(
          "Looks like there was a problem. Status Code: " + response.status
        );
        reject(); //returns undefined!
      }

      // Examine the text in the response
      response.json().then(data => {
        resolve(data);
      });
    })
    .catch(function(err) {
      console.log("Fetch Error :-S", err);
    });
  };
};
getData(urlToFetch).then(data => /*do something*/ ); // logs to console the website call: a json file

因此，当数据可用时，您可以调用resolve（data），然后它会根据您的承诺调用then方法。

希望它有所帮助。

如何使用Fetch（而不是ajax）将Promise的解析存储到变量中

4 个答案: