`fetch` in React Native не возвращает ожидаемые данные из URL

Question

Я хочу использовать API fetch() для загрузки данных из URL-адреса в React Native Application. В частности, я хочу загрузить все элементы с страницы Hackernews Jobs.

Как указано в их API документе, соответствующий вызов должен выйти к URL-адрес: https://hacker-news.firebaseio.com/v0/jobstories.json

При переходе на этот URL в браузере, я получаю простой яваскрипт массива идентификаторов, как и ожидался:

[11379939,11379294,11378554,11377293,11375582,11373919,11372195,11371135,11369985,11369460,11361426,11357881,11356669,11354578,11351786,11350273,11349328,11347911,11346192,11343590,11342818,11342137,11341262,11340129] 

Однако, когда я хочу загрузить данные в свое приложение React Native, используя следующий метод, я не получаю тот же массив javascript, который я получаю при отправке запроса через браузер.

export const fetchJobs =() => { 
    return (dispatch) => { 
    return fetch('https://hacker-news.firebaseio.com/v0/jobstories.json', { 
     method: 'GET', 
     headers: { 
     'Accept': 'application/json' 
     } 
    }) 
    .then((response) => { 
     console.log('Actions - fetchJobs - received response: ', response) 
     const json = JSON.parse(response) 
    }) 
    .then((jobs) => { 
     console.log('Actions - fetchJobs - received jobs: ', jobs) 
     dispatch(receiveJobs(jobs)) 
    }) 
    .catch((error) => { 
     console.warn('Actions - fetchJobs - recreived error: ', error) 
    }) 
    } 
} 

Я зову fetchJobs() с помощью dispatch из Redux в моем первоначальном Реагировать компонент следующим образом:

componentDidMount() { 
    var fetchJobsAction = fetchJobs() 
    console.log('JobsRootComponent - fetch jobs: ' + fetchJobsAction) 
    const { dispatch } = this.props 
    dispatch(fetchJobs()) 
} 

Однако при проверке вывода в отладочной консоли Chrome, выход выглядит следующим образом:

Может кто-нибудь сказать мне, почему содержание ответа отличается между e-запросы, которые я отправляю из браузера и из моего приложения React Native?

Update: В соответствии с просьбой в комментариях, я теперь печататься response.json(), а также, давая мне следующий результат:

Так действительно, данные массива в настоящее время, кажется, есть. Но я до сих пор не понимаю, как я могу получить доступ к нему, откуда я нахожусь ...

Answer 1

Используйте возвращение в then

Вы должны вернуть результат response.json(), если вы chaining then calls.

export const fetchJobs =() => { 
    return (dispatch) => { 
    return fetch('https://hacker-news.firebaseio.com/v0/jobstories.json', { 
     method: 'GET', 
     headers: { 
     'Accept': 'application/json' 
     } 
    }) 
    .then((response) => { 
     console.log('Actions - fetchJobs - received response: ', response) 
     return response.json(); 
    }) 
    .then((jobs) => { 
     console.log('Actions - fetchJobs - received jobs: ', jobs) 
     dispatch(receiveJobs(jobs)) 
    }) 
    .catch((error) => { 
     console.warn('Actions - fetchJobs - recreived error: ', error) 
    }) 
    } 
} 

Answer 2

Ответ на выборку имеет собственную функцию анализа JSON, просто позвоните response.json(), который вернет новое обещание.

fetch('https://hacker-news.firebaseio.com/v0/jobstories.json') 
    .then(reponse => response.json()) 
    .then(json => console.log(json))