反应 + 获取请求

Question

我正在阅读这篇文章 fetch API 并试图了解如何在 React 中使用 fetch。首先，您能解释一下什么是请求标头？

比， 在角度我们做这样的事情：

$http.get('/someword').success(function(response) {
      console.log('i got the data i requested');
      var variable = response;
      }

在服务器端我可以写：

var app = express();
app.get('/thissomeword', function(req, res) {
  console.log('I got a GET request')      
  res.json(someVariableWithData)
})

如何用 fetch 做同样的事情？主要问题是何时何地我需要这样做？我知道我需要在获取数据后执行此操作。setState({}) 以便以后使用我的数据，但是 HOW 对我来说是一个巨大的难题。

Answer 1

这里有很棒的 Facebook 文档： https://facebook.github.io/react-native/docs/network.html 用例子说明你想要什么

请求中的标头

有时您需要请求中的标头来提供访问令牌或内容类型（尤其是在POST 请求中）

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

承诺而不是回调

在您的示例中，您将回调（req 和res）传递给您的请求，在fetch 中您有Promises，因此您将得到响应作为then 的参数或catch 中的错误消息。

fetch('https://facebook.github.io/react-native/movies.json')
  .then((response) => response.json())
  .then((responseJson) => {
    return responseJson.movies;
  })
  .catch((error) => {
    console.error(error);
  });

Answer 2

请求标头

基本来说，请求标头由浏览器和应用程序开发人员设置，用于告诉 Web 服务器客户端正在发送什么以及它可以接受什么作为回报。

Reference

获取

Fetch 用于进行异步网络调用。它具有基于 Promise 的更简单的 API 支持。我会用更少的行数让你的代码更简洁。

Reference