将来自服务器端 axios 请求的响应发送到 React/Redux 应用程序

Question

我对在 Node/Express 中创建后端有点陌生，但我正在尝试使用 axios 发出 HTTP 请求。我已经设置了将发出必要请求的快速路由，并且我通过使用 Postman 知道我正在测试的 GET 请求确实 return 响应。我遇到的问题是如何 return 该数据并将其发送到我的 React/Redux 应用程序以供使用。

-服务器端-

//Express Route
app.get('/api/recipes', recipeController.getRecipes)

//Controller Function that makes axios request
const axios = require('axios')
const Promise = require('bluebird')

module.exports = {
  getRecipes(req, res) {
      const url = "https://gw.hellofresh.com/api/recipes/search?country=us&limit=9"
      const token = "IUzI1NiIsInR5c"

      axios
      .get(url, {
        "headers": {"Authorization": "Bearer " + token}
      })
      .then((response) => {
        console.log(response)
      })
      .catch((err) => {
        console.log(err)
      })

  }
}

-客户端-

我分派以下操作并使用我创建的终结点进行调用。然而，在这一点上，即使在服务器端我能够得到响应，我也会得到一个错误状态。当我读到 axios GET 请求 returns promises 时，我尝试使用 Promises，但无法全神贯注于如何实现它。

export const getRecipes = () => {
  return (dispatch) => {
    axios
    .get('/api/recipes')
    .then((resp) => {
      console.log(resp)
    })
    .catch((err) => {
      console.log(err)
    })
  }
}

Answer 1

需要在路由中调用res.send，将数据发送给客户端：

module.exports = {
  getRecipes(req, res) {
      const url = "https://gw.hellofresh.com/api/recipes/search?country=us&limit=9"
      const token = "IUzI1NiIsInR5c"

      axios
      .get(url, {
        "headers": {"Authorization": "Bearer " + token}
      })
      .then(response => {
        console.log(response)
        res.send(response) // <= send data to the client
      })
      .catch(err => {
        console.log(err)
        res.send({ err }) // <= send error
      })
  }
}

将来自服务器端 axios 请求的响应发送到 React/Redux 应用程序

Send response from server side axios request to React/Redux app

node.js

promise

reactjs

axios