Question

我正试图从Twitter获取一些数据来操纵客户端。我正在使用twit来访问数据。

我有一个节点服务器，我称之为 server.js ，然后是一个React前端，我称之为 index.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({ ... })）

所以我知道这有效。

我要做的是让 index.js 从服务器调用数据，如下所示：

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

然后我在 server.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 })
    })
})

但是，当我运行 index.js 时，在服务器端和浏览器控制台中没有任何日志记录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())以读取完成的流：

Body mixin的json（）方法接受一个Response流并将其读取完成。它返回一个promise，解析为将正文解析为JSON的结果。

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

另外，您不应该使用自己的序列化程序，因为express可以自动为您执行此操作，如果您使用数据调用res.send()：

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

尝试从客户端

1 个答案: