Essayer d'accéder à la réponse de l'API du serveur côté client

Question

J'essaie d'obtenir des données de Twitter à manipuler du côté client. J'utilise twit pour accéder aux données.

J'ai un serveur de nœud que je vais appeler server.js, puis un RÉAGIR front-end que je vais appeler index.js.

Si je lance le code suivant sur server.js il enregistre les données renvoyées (tweets) dans la console:

T 
    .get('statuses/user_timeline', { skip_status: true }) 
    .catch(function (err) { 
    console.log('caught error', err.stack) 
    }) 
    .then(function (result) { 
    // `result` is an Object with keys "data" and "resp" 
    console.log(result.data) 
    }) 

(où T est const T = new Twit({ ... }))

Je sais que cela fonctionne .

---

Ce que je suis en train de faire est d'avoir index.js appel les données du serveur comme celui-ci:

componentDidMount() { 
    fetch('http://localhost:3000/internal-api/twitter/') 
    .then(data => { 
     console.log(data) 
    }) 
} 

je puis configurer le code dans server.js comme suit :

app.get('/internal-api/twitter/', (req, res) => { 
    T 
    .get('statuses/user_timeline', { skip_status: true }) 
    .then(function(result) { 
     // `result` is an Object with keys "data" and "resp" 
     console.log(result.data) 
     res.send(result.data) 
    }) 
    .catch(function(err) { 
     console.log('caught error', err.stack) 
     res.send({ error: err }) 
    }) 
}) 

Cependant, quand je lance index.js rien ne se connecte sur le serveur si de et dans la console du navigateur suivant est enregistré pour result.data

Response { 
    body: (...) 
    bodyUsed: false 
    headers: Headers {} 
    ok: true 
    redirected: false 
    status: 200 
    statusText: "OK" 
    type: "basic" 
    url: "http://localhost:3000/internal-api/twitter/" 
    __proto__ : Response 
} 

Toutes les idées que je fais mal? Je suis plus qu'heureux de fournir plus de code, je ne voulais juste pas encombrer la question.

Toute aide est appréciée, merci!

Mise à jour: Ci-dessous est dans son intégralité.

const express = require('express') 
const path = require('path') 

const app = express() 
const PORT = process.env.PORT || 5000 

var Twit = require('twit') 

const T = new Twit({ 
    consumer_key: 'XXXXXXXX', 
    consumer_secret: 'XXXXXXXX', 
    access_token: 'XXXXXXXX', 
    access_token_secret: 'XXXXXXXX' 
}) 

app.get('/internal-api/twitter/', (req, res) => { 
    T 
    .get('statuses/user_timeline', { skip_status: true }) 
    .then(function(result) { 
     // `result` is an Object with keys "data" and "resp" 
     console.log(result.data) 
     res.send(result.data) 
    }) 
    .catch(function(err) { 
     console.log('caught error', err.stack) 
     res.send({ error: err }) 
    }) 
}) 

// Priority serve any static files. 
app.use(express.static(path.resolve(__dirname, '../react-ui/build'))); 

// Answer API requests. 
app.get('/api', function (req, res) { 
    res.set('Content-Type', 'application/json'); 
    res.send('{"message":"Hello from the custom server!"}'); 
}); 

// All remaining requests return the React app, so it can handle routing. 
app.get('*', function(request, response) { 
    response.sendFile(path.resolve(__dirname, '../react-ui/build', 'index.html')); 
}); 

app.listen(PORT, function() { 
    console.log(`Listening on port ${PORT}`); 
}); 

Answer 1

Vous devez appeler .then((response) => response.json()) côté client pour lire le afflueront achèvement:

La méthode JSON() du mixin corps prend un flux de réponse et il lit à la fin. Il renvoie une promesse qui se résout avec le résultat de l'analyse du corps du texte en JSON.

componentDidMount() { 
    fetch('http://localhost:3000/internal-api/twitter/') 
    .then(response => response.json()) 
    .then(data => console.log(data)) 
    .catch(err => console.log(err)); 
} 

En outre, vous ne devriez pas utiliser propre sérialiseur, parce que express peut le faire automatiquement pour vous, si vous appelez res.send() avec des données:

app.get('/internal-api/twitter/', (req, res) => { 
    T 
    .get('statuses/user_timeline', { skip_status: true }) 
    .then(function(result) { 
     // `result` is an Object with keys "data" and "resp" 
     console.log(result.data) 
     res.send(result.data) 
    }) 
    .catch(function(err) { 
     console.log('caught error', err.stack) 
     res.send({ error: err }) 
    }) 
})