Использование заголовка авторизации с Fetch in React Native

Question

Я пытаюсь использовать fetch в React Native для захвата информации из API Hunt продукта. Я получил правильный токен доступа и сохранил его в состоянии, но, похоже, не могу передать его в заголовке авторизации для запроса GET.

Вот что я до сих пор:

var Products = React.createClass({ 
    getInitialState: function() { 
    return { 
     clientToken: false, 
     loaded: false 
    } 
    }, 
    componentWillMount: function() { 
    fetch(api.token.link, api.token.object) 
     .then((response) => response.json()) 
     .then((responseData) => { 
      console.log(responseData); 
     this.setState({ 
      clientToken: responseData.access_token, 
     }); 
     }) 
     .then(() => { 
     this.getPosts(); 
     }) 
     .done(); 
    }, 
    getPosts: function() { 
    var obj = { 
     link: 'https://api.producthunt.com/v1/posts', 
     object: { 
     method: 'GET', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
      'Authorization': 'Bearer ' + this.state.clientToken, 
      'Host': 'api.producthunt.com' 
     } 
     } 
    } 
    fetch(api.posts.link, obj) 
     .then((response) => response.json()) 
     .then((responseData) => { 
     console.log(responseData); 
     }) 
     .done(); 
    }, 

Ожидание у меня есть мой код выглядит следующим образом:

1. Сначала я fetch маркер доступа с данными из моего импортируемого модуля API
2. После этого я установил свойство clientTokenthis.state, чтобы получить полученный токен доступа.
3. Затем я запустил getPosts, который должен вернуть ответ, содержащий массив текущих сообщений из Product Hunt.

Я могу подтвердить, что маркер доступа принимается и что this.state получает его в качестве своей собственности clientToken. Я также могу проверить, выполняется ли getPosts.

Ошибки я получаю следующий:

Я отработку предположения, что я как-то не проходящее вдоль маркеров доступа должным образом в моем заголовке авторизации, но дон Похоже, что он может понять, почему именно.

Answer 1

Оказалось, что неправильно использовал метод fetch.

fetch ожидает два параметра: конечная точка API и необязательный объект, который может содержать тело и заголовки.

Я обертывал предполагаемый объект в течение второго объекта, который не дал мне желаемого результата.

Вот как это выглядит на высоком уровне:

fetch('API_ENDPOINT', OBJECT) 
    .then(function(res) { 
    return res.json(); 
    }) 
    .then(function(resJson) { 
    return resJson; 
    }) 

я структурировал свой объект как таковой:

var obj = { 
    method: 'POST', 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json', 
    'Origin': '', 
    'Host': 'api.producthunt.com' 
    }, 
    body: JSON.stringify({ 
    'client_id': '(API KEY)', 
    'client_secret': '(API SECRET)', 
    'grant_type': 'client_credentials' 
    }) 

Answer 2

Пример выборки с заголовком авторизации:

fetch('URL_GOES_HERE', { 
    method: 'post', 
    headers: { 
    'Authorization': 'Basic '+btoa('username:password'), 
    'Content-Type': 'application/x-www-form-urlencoded' 
    }, 
    body: 'A=1&B=2' 
});