Utilizzo di un'intestazione di autorizzazione con Recupera in React Native

Question

Sto provando a utilizzare fetch in React Native per ottenere informazioni dall'API Hunt prodotto. Ho ottenuto il token di accesso corretto e l'ho salvato in stato, ma non sembra che sia in grado di passarlo all'interno dell'intestazione di autorizzazione per una richiesta GET.

Ecco quello che ho finora:

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

L'aspettativa che ho per il mio codice è il seguente:

1. In primo luogo, lo farò fetch un token di accesso con i dati dal mio modulo API importati
2. Successivamente, imposterò la proprietà clientToken di this.state a uguale al token di accesso ricevuto.
3. Quindi eseguirò getPosts che dovrebbe restituire una risposta contenente una serie di messaggi correnti da Product Hunt.

sono in grado di verificare che il token di accesso viene ricevuto e che this.state sta ricevendo come sua proprietà clientToken. Sono anche in grado di verificare che sia in esecuzione getPosts.

L'errore che sto ricevendo è il seguente:

Ho lavorato fuori l'ipotesi che sto in qualche modo non passando lungo il token di accesso correttamente a mio colpo di testa di autorizzazione, ma don sembra di essere in grado di capire esattamente perché.

Answer 1

Si scopre che stavo usando il metodo fetch in modo errato.

fetch prevede due parametri: un endpoint all'API e un oggetto facoltativo che può contenere corpo e intestazioni.

Stavo avvolgendo l'oggetto desiderato all'interno di un secondo oggetto, che non mi ha ottenuto alcun risultato desiderato.

Ecco come appare su un livello elevato:

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

ho strutturato il mio oggetto in quanto tale:

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

Esempio recuperare con l'intestazione autorizzazione:

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