Express/React 承诺停滞不前答案

【问题标题】：Express/React promise stalledExpress/React 承诺停滞不前
【发布时间】：2020-01-11 15:37:48
【问题描述】：

我在端口 5000 上有一个 Express 后端服务器，并在端口 3000 上运行响应前端。我正在尝试从 express post route 获取一些数据并将其返回到前端，但我的 Promise 从未解决。它总是以“停滞不前”告终。

util.inspect(messageList) 在服务器控制台上显示我的数组，但我在前端的 Promise 永远不会解析。

我正在 ComponentDidMount 上获取一些数据服务器端，如下所示：

class Conversation extends React.Component {
  state = {
    conversations: [],
    messages: [],
    error: null,
    loading: true,
    input: '',
    owner: 'Unassigned'
  }

  componentDidMount() {
    const { match } = this.props
    const { conversationId } = match.params
    // Make a POST request to our server and pass the conversationId
    this.getMessages(conversationId)
  }

  getMessages(conversationId) {
    return fetch('/search-conversation', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ conversation: conversationId })
    })
      .then(res => res.json())
      .then((messages) => this.setState({ messages }))
  }

服务器端：

app.post('/search-conversation', (req, res) => {
    conversationId = req.body.conversation

    if (!conversationId) {
      res.send('/error');
    } else {
      console.log(`Success, conv id is ${conversationId}`);
    }
    // call function to go get messages from API
    console.log(`fetching messages for ${conversationId}`)
    return fetch(endpoint)
      .then((res) => res.json())
      .then(({ data }) => data)
      .then((data) => {
        const messageList = data[0].messages.data
        return messageList
      })
      .then((messageList) => console.log(util.inspect(messageList)))
      .catch(error => console.error(`Error: ${error}`))
  });

任何想法都表示赞赏，在此先感谢。

【问题讨论】：

您确定不需要fetch('/search-conversation' 中的完整网址吗？我想你会的
它可能永远不会解决，因为它可能会拒绝 - 通常，您应该在前端代码的某处有一个 .catch 来处理错误
完整的网址是什么意思？ /search-conversation 只是一个 app.post 路由，我在其中获取从客户端传入的 conversationId 并从外部 API 获取一些数据。
我说的是你的前端方法getMessages。你的后端是一个 api 对吗？您的前端不知道您的 api 是如何实现的。对于您的本地环境，不应该是'localhost:5000/search-conversation' 吗？我可能错了，但这是否意味着我一直在错误地使用本地开发环境或其他什么？？
@Andrew 我的 package.json 中有一个代理设置，告诉 React 像这样使用我的 express 服务器：``` "proxy": "localhost:5000" ```

标签： javascript node.js reactjs promise fetch

【解决方案1】：

您在服务器端缺少将向客户端发送响应的 res.json() 调用：

app.post('/search-conversation', (req, res) => {
  conversationId = req.body.conversation

  if (!conversationId) {
    res.send('/error');
  } else {
    console.log(`Success, conv id is ${conversationId}`);
  }
  // call function to go get messages from API
  console.log(`fetching messages for ${conversationId}`)
  return fetch(endpoint)
    .then((res) => res.json())
    .then(({ data }) => data)
    .then((data) => {
      const messageList = data[0].messages.data
      res.json(messageList)                         // <-- sending response
    })
    .catch(error => console.error(`Error: ${error}`))
});

【讨论】：

感谢@antonku 似乎已经成功了。我没有意识到我必须调用 res.json() 服务器端我想我可以返回值并让它可以访问客户端。