クライアント側

Question

私はクライアント側で操作するためのTwitterからいくつかのデータを取得しようとしている上のサーバからのAPIレスポンスにアクセスしようとしています。私はtwitを使ってデータにアクセスしています。

私はindex.jsと呼ぶことにしますserver.js、その後、リアクトフロントエンドと呼ぶことにしますノードのサーバーを持っています。

私はserver.jsに次のコードを実行する場合は、コンソールで返されたデータ（ツイート）を記録します。

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) 
    }) 

（Tがconst T = new Twit({ ... })です）

だから私は、この作品を知っています。その後、

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

私はserver.jsでセットアップコードを次のように：

---

私は何をしようとしていることindex.js呼び出し、このようなサーバーからのデータを持っています：私はindex.jsを実行したときに

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 }) 
    }) 
}) 

しかし、何もサーバーのSi上のログに記録しませんドとは、ブラウザのコンソールで、次は私が間違ってやっている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 
} 

任意のアイデアのために記録されますか？私はより多くのコードを提供できて嬉しいです、私はちょうど質問を混乱させたくありませんでした。

すべてのヘルプは高く評価され、感謝！

更新：以下は、server.jsです。

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

あなたはそれが完了するストリームを読み取るために、クライアント側で.then((response) => response.json())を呼び出す必要があります：

ボディミックスインのJSON（）メソッドは、応答ストリームを受け取り、完了にそれを読み込みます。本文をJSONとして解析した結果で解決される約束を返します。

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

あなたがデータをres.send()を呼び出す場合expressは、あなたのために自動的にこれを行うことができますので、また、あなたは、自分のシリアライザを使用しないでください。

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 }) 
    }) 
})