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

Question

-- 情况背景 --

我正在为我们的商业营销策略服务的客户进行电子表格注册等等...

表格已经完成，看起来很棒。现在我需要将它连接到我们的业务用来保存/排序/查询/等提交信息的服务的现有 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 输入 type="select" ）

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 响应对象将正文数据作为可读流返回。

该JSON功能设计接受流，并将其转换成JSON流完成之后。对于熟悉 axios 或其他 AJAX 便利库的任何人来说，这可能会感觉有些不直观，因为该部分流程是从视图中抽象出来的。

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

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