Как получить данные JSON из fetch (response-native)

Я пишу небольшое приложение для iPhone, используя реакцию native. Я пытаюсь получить данные JSON с веб-сайта с использованием fetch. Как в примере:

   function status(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  }
  throw new Error(response.statusText)
}

function json(response) {
  return response.json()
}


fetch('/users', {
  method: 'post',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
}).then(status)
  .then(json)
  .then(function(json) {
    console.log('request succeeded with json response', json)
  }).catch(function(error) {
    console.log('request failed', error)
  })

Все работает отлично, но мне нужно использовать эти данные позже. Когда я пытаюсь назначить его некоторой переменной в json-функции, я получаю "Request error" и после этого получаю данные (правильно). Какая наилучшая практика для получения этих данных и иметь ее в некоторой переменной, чтобы использовать ее позже?

Ответ 1

Вы можете создать переменную в конструкторе компонента:

constructor(props) {
    super(props);
    this.state = {
       jsonData: ''
    }
}

Затем вы обновляете эту переменную, когда вам нужно:

 .then((responseData) => {
    this.setState({
      jsonData: responseData
    });
  })

Ответ 2

Я сделал это так. Я отобразил ответ на консоли. Вы можете хранить данные ответа в своей переменной состояния или в локальном хранилище по своему усмотрению.

  doSignUp() {

     console.log("inside post api");
     fetch('your API URL', {
     method: 'POST',
     headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json',

                },


      body: JSON.stringify({
      password: this.state.password,
      email:this.state.email,
      name: this.state.firstname,
      last_name :this.state.last_name,
      mobile:this.state.mobile,
      ssn:"2222222"

     })
      }).then((response) => response.json())
        .then((responseData) => {
                                 console.log("inside responsejson");
                                 console.log('response object:',responseData)

         }).done();
     }

Ответ 3

Мой дорогой друг, это очень просто

Во-первых, как вы знаете, каждый запрос возвращает заголовок и тело

Когда мы используем fetch ответ по умолчанию, который является запросом заголовков. Если нам нужно тело запроса, то достаточно response.json()

return fetch(url,{
  method: 'POST',//GET and ...
  headers:{
      Accept: 'application/json',
      'Content-Type': 'application/json',
  },
  body: JSON.stringify({
      elm: "elm" //is fake
  })
 })
 .then((response)=>response.json()) //   <------ this line 
 .then((response)=>{
   return response ;
 });

И если тело вашего запроса html dom, просто используйте этот response.text()

И если вы хотите вернуть свой заголовок, не нужно ничего делать, просто добавьте эту строку .then((response)=>response.json())

Ответ 4

В моем случае я использовал sails.js с локальным паспортом, но он очень похож на любую другую структуру node.js, чтобы поймать эти переменные, которые я использовал для ввода функции (req, res), где переменные, req.body. В вашем случае req.body.name будет содержать "Hubot", а req.body.login будет содержать "hubot". Ответ будет отправлен с использованием res.send. проверьте документацию node.js для более подробной информации.

Ответ 5

У меня так работает

Это кнопка

<Button onPress={this._onPressButton} accessibilityLabel="tap!!!" />

Это действие

  _onPressButton() {

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

  }

результат

[14:30:19] Array [
[14:30:19]   Object {
[14:30:19]     "id": "1",
[14:30:19]     "releaseYear": "1977",
[14:30:19]     "title": "Star Wars",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "2",
[14:30:19]     "releaseYear": "1985",
[14:30:19]     "title": "Back to the Future",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "3",
[14:30:19]     "releaseYear": "1999",
[14:30:19]     "title": "The Matrix",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "4",
[14:30:19]     "releaseYear": "2010",
[14:30:19]     "title": "Inception",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "5",
[14:30:19]     "releaseYear": "2014",
[14:30:19]     "title": "Interstellar",
[14:30:19]   },
[14:30:19] ]
[14:30:19] Array [
[14:30:19]   Object {
[14:30:19]     "id": "1",
[14:30:19]     "releaseYear": "1977",
[14:30:19]     "title": "Star Wars",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "2",
[14:30:19]     "releaseYear": "1985",
[14:30:19]     "title": "Back to the Future",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "3",
[14:30:19]     "releaseYear": "1999",
[14:30:19]     "title": "The Matrix",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "4",
[14:30:19]     "releaseYear": "2010",
[14:30:19]     "title": "Inception",
[14:30:19]   },
[14:30:19]   Object {
[14:30:19]     "id": "5",
[14:30:19]     "releaseYear": "2014",
[14:30:19]     "title": "Interstellar",
[14:30:19]   },
[14:30:19] ]