将数组作为 API 响应从 Express 发送到前端时遇到问题。有什么建议？答案

【问题标题】：Having trouble sending array as API response from Express to Front End. Any suggestions?将数组作为 API 响应从 Express 发送到前端时遇到问题。有什么建议？
【发布时间】：2021-04-08 17:58:24
【问题描述】：

我是 Express / API 的新手，我正在尝试从服务器向客户端发送 JSON 对象数组...这是一个简单的示例：

服务器端（Express、路由器文件）

router.get('/test', function(req, res, next) {
  var testData = ["{'field' : 'a'}", "{'field' : 'b'}", "{'field' : 'c'}"]
  console.log(testData)
  res.send(testData)
})

首先我将 JSON 字符串化，然后在发送响应之前将它们拼接到一个数组中......现在在客户端......

客户端（Vue，getTest由按钮触发，我现在只是检查日志）

methods : {
    getTest: async () => {
      let testData = await axios.get('http://localhost:3000/test',[])
      console.log(testData)
    }
  }

在这里，我从 API 中提取 JSON 数组，只想在控制台中查看它们。这只会返回一个空字符串，如下所示：

{data: "", status: 200, statusText: "OK", headers: {…}, config: {…}, …}

有什么想法吗？如果我遗漏了一些基本的东西，我深表歉意。请注意，我不会提前知道从 API 发送的数组的长度。

【问题讨论】：

标签： node.js json express vue.js

【解决方案1】：

您可以在服务器端做的第一件事是使用res.json() insted of res.send() 进行json 响应

编辑：这里是文档的链接 https://expressjs.com/fr/api.html#res.json

【讨论】：

【解决方案2】：

首先你能告诉我们这些“console.log”的输出，以便我们可以调试它吗？我将您的 API 放在我自己的快速服务器中，我得到了这个很好的响应

0   "{'field' : 'a'}"
1   "{'field' : 'b'}"
2   "{'field' : 'c'}"

并在我的 Vue 应用程序中获取它并得到以下响应：

    config: Object { url: "http://localhost:3000/test", method: "get", timeout: 0, … }

data: (3) […]

0: "{'field' : 'a'}"

1: "{'field' : 'b'}"

2: "{'field' : 'c'}"

length: 3

<prototype>: Array []

headers: Object { "content-type": "application/json; charset=utf-8" }

request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }

status: 200

statusText: "OK"

所以从我看到的你的代码中一切正常；我认为您不需要更改代码中的任何内容。这可能与您的配置有关，如果您再次告诉我们您的应用程序日志，我们可能会发现问题。

【讨论】：

非常感谢您提供的帮助。服务器端控制台说： '[ "{'field' : 'a'}", "{'field' : 'b'}", "{'field' : 'c'}" ] GET /test 200 3.749 ms - -' 在客户端，它看起来与您的日志相似，只有数据字段是一个空字符串。配置：{url：“localhost:3000/test”，方法：“get”，标题：{...}，transformRequest：Array（1），transformResponse：Array（1），...}数据：“”状态：200 statusText：“OK "
有趣的是，当我导航到 localhost:3000/test 时，我没有看到任何错误，但没有数据发送到响应。只是一个空白屏幕。 Res.send('test') 在该页面显示 'test' 并且 Res.send({'a':'test'}) 正确显示 json。但是当我做 Res.send(['a','b']) 时，我什么也没得到。
在搞砸了一点之后，我尝试了：res.send({ 'b': ['a'] })，它实际上发送了一些东西，但不是我所期望的。日志 :::: {"b":{"b":"a"}} 但是如果我将它稍微更改为 res.send({ 'whyisntthisworking': ['a'] })，它就不再起作用了。
我看到你在这里使用了res.send(testData)，我在我的代码中做了同样的事情，因为你发送的是一个对象数组的 testData 变量。我不明白您的代码如何与我一起正常工作，但它对您不起作用。我想不出什么来解决这个问题。但只知道你的代码很好。它必须在您的明确配置中。

【解决方案3】：

您是否尝试过像这样在前端更改您的方法？

methods : {
    getTest: async () => {
      // use promise instead
      await axios.get('http://localhost:3000/test',[]).then((resp) => {
        let testData = resp.data
        console.log(testData)
      }).catch((err) => {
        console.log('oopss..')
      })
    }
  }

【讨论】：