Używanie nagłówka autoryzacji z funkcją Pobierz w React Native

Question

Próbuję użyć fetch w React Native, aby pobrać informacje z API usługi Product Hunt. Dostałem prawidłowy token dostępu i zapisałem go w stanie, ale nie wydaje się, aby udało mu się przekazać go w nagłówku autoryzacji dla żądania GET.

Oto co mam do tej pory:

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(); 
    }, 

Oczekiwanie mam dla mojego kodu jest następujący:

1. Pierwszej będę fetch tokenu dostępu do danych z mojego importowanego modułu API
2. Po tym ustawię właściwość clientToken z this.state na równi z otrzymanym tokenem dostępu.
3. Następnie uruchomię getPosts, która powinna zwrócić odpowiedź zawierającą tablicę aktualnych wpisów z Product Hunt.

jestem w stanie sprawdzić, czy token dostępu jest odbierany i że this.state odbiera go jako clientToken nieruchomości. Jestem również w stanie sprawdzić, czy uruchamiany jest getPosts.

Błąd Otrzymuję jest następujący:

pracuję przy założeniu, że ja jakoś nie przechodzi wzdłuż token dostępu właściwie w moim nagłówku autoryzacji, ale don wydaje się być w stanie dokładnie zrozumieć, dlaczego.

Answer 1

Okazuje się, że nieprawidłowo użyłem metody fetch.

fetch oczekuje dwóch parametrów: punktu końcowego do interfejsu API i opcjonalnego obiektu, który może zawierać treść i nagłówki.

Owinąłem zamierzony przedmiot w obrębie drugiego przedmiotu, co nie przyniosło mi pożądanego rezultatu.

Oto jak to wygląda na wysokim poziomie:

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

ja strukturze mojego obiektu jako takie:

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

Przykład sprowadzić z nagłówkiem autoryzacji:

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