为什么我在本地 node.js/express 服务器的响应中没有得到 JSON 对象？

Question

-- 情况背景--

我正在为我们的商业营销策略服务 blah blah blah 的客户制作电子表格注册...

表格已完成，看起来很棒。现在我需要将它连接到我们的业务用来保存/排序/查询/等提交信息的服务的现有 API。

我是一名非常初级的开发人员，API 非常复杂。我只是想确保我的 ES6/javascript 工作正常。 ajax 调用正在工作，我的代码中没有错误等。所以为了测试事情，似乎最简单的事情就是制作一个简单的本地服务器，这样我就可以测试我的调用，让一切正常，然后我开始经历大量API 文档并将其正确连接到我们的服务。第一个电话似乎工作正常。但是我无法让我的小宝贝服务器正确地“响应”一些静态信息来解析。我主要是一名前端开发人员，但我现在痴迷于解决这个小服务器问题......所以非常感谢您的帮助。

-- 获取请求--

fetch('http://localhost:4000/send-zip')
            .then( 
                (response) => {
                    response.json(),
                    console.log('begin fetch to local server'),
                    console.log(response),
                    populate_store_selector(response)
                })
            .catch(
                (error)=> console.log('basic fetch request failed' + error)
            )

-- 万一有人问的其他功能--

（它只是为了迭代和填充一个 html 输入类型=“选择”）

function populate_store_selector(arg) {
    for (i of arg) {
        let new_option = document.createElement('option')
        new_option.innerHTML = arg[i]
        select_shop.appendChild(new_option)
    }
}

-- 我的小宝贝服务器--

const express = require('express')
const server = express()

server.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

server.get('/send-zip', function (req, res) {
    res.send({ "options": ['option1', 'option2', 'option3'] })
})

server.listen(4000, () => console.log('mock server listening on port 4000!'))

服务器工作得很好，除了我永远无法让它返回一个 JSON 对象之外，它的工作是否正常 :( 到目前为止，我已经尝试了很多东西。老实说，这并不重要，因为我在前端的请求工作得很好，但我太着迷了，现在不能放手......

-- console.log() 在浏览器中显示的内容--

begin fetch to local server

main.js:104 

Response {type: "cors", url: "http://localhost:4000/send-zip", redirected: false, status: 200, ok: true, …}body: (...)bodyUsed: trueheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "cors"url: "http://localhost:4000/send-zip"__proto__: Response

main.js:108 

basic fetch request failedTypeError: arg is not iterable

Answer 1

您可以尝试在响应流完成后解析响应，然后对数据执行操作。

fetch('http://localhost:4000/send-zip')
        .then( 
            (response) => {
                return response.json();
        }).then(
            (response_json) => {
                console.log('begin fetch to local server'),
                console.log(response_json),
                populate_store_selector(response_json)
            })
        .catch(
            (error)=> console.log('basic fetch request failed' + error)
        )

您需要包含额外的.then 步骤并返回response.json() 的原因是http 响应对象将正文数据作为readable stream 返回。

JSON 函数旨在接受流并在流完成后将其转换为 JSON。对于熟悉 axios 或其他 AJAX 便利库的人来说，这可能有点不直观，因为这部分过程是从视图中抽象出来的。

这基本上意味着在您等待响应http对象返回后，您需要再次等待流也完成。

有几种不同的方法可以在完成后作用于流，包括arrayBuffer、blob 和text（我认为还有更多）。通常，他们倾向于在数据完成后将数据转换为您喜欢的格式。