javascript - GitHub Fetch polyfill 不使用 React 表单组件提交表单正文

Question

我正在使用fetch GitHub 与 React 的 api polyfill。提交表单的示例如下:

var form = document.querySelector('form')

fetch('/users', {
    method: 'post',
    body: new FormData(form)
})

我的代码目前在组件内看起来像这样

handleSubmit (event) {
    event.preventDefault();

    fetch('/api/user/', {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        method: 'post',
        body: JSON.stringify(this.state)
    }).then(function(response) {
        console.log(response);
    })
},

在应用程序状态下，我保存正在发送的数据。这是一个简单的对象。

{
    email: 'someemail@email.com',
    password: 'password',
    name: 'Some Name'
}

我尝试从事件 event.target 传递表单本身，以及通过 ID 属性获取表单并将其传递给正文。

在服务器上，我使用 NodeJs 来捕获请求中的表单正文。但是，如果我不传递 header 'Content-Type': 'application/x-www-form-urlencoded'，则请求为空。但是，当我传递它时，整个主体都是带有空键的值，但仅当我使用 JSON.stringify(this.state) 时。如下:

'{email: 'someemail@email.com',password: 'password',name: 'Some Name'}': ''

我还尝试过不传递任何 header ，并传递以下 header 。

headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
}

我通过 webpack 添加 fetch 模块作为插件。

new webpack.ProvidePlugin({
    'Promise': 'exports?global.Promise!es6-promise',
    'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
})

我被困住了，感谢任何帮助。

目前，我在服务器上进行了一次非常丑陋的黑客攻击，将key=>value对再次转换为对象，但分享它是可耻的事件。

var userInfo = req.body;
var tempVals;
//hack to fixed fetch
if(!userInfo.email) {
    for(values in req.body) {
        tempVals = JSON.parse(values);

        if(tempVals.email) {
            userInfo = tempVals;
            break;
        }
    }
}

...我说它很丑。

更新

多亏了米歇尔，我才弄清楚这与解析表单数据有关。我使用了 body-parser 模块。我无法使用当前的设置读取数据。我必须将客户端的代码更改为如下:

handleSubmit (e) {
    e.preventDefault();

    fetch('/api/user/', {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        method: 'post',
        body:  JSON.stringify(this.state)
    }).then(function(response) {
        console.log(response);
    })
} 

在后端，我必须将 JSON 正文解析器添加到我的路由中，如下所示

var bodyParser = require('body-parser');
var jsonParser = bodyParser.json();

app.post('/user', jsonParser, function(req, res) {
    //do something with the data
});

Answer 1

您发布的示例:

var form = document.querySelector('form')

fetch('/users', {
    method: 'post',
    body: new FormData(form)
})

是发布表单数据的示例(有关更多信息，请参阅this Stack Overflow question)。您正在尝试提交 JSON 数据，自述文件中的下一个示例是您应该使用的方法:

fetch('/users', {
  method: 'post',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
})

所以你的代码看起来像

handleSubmit (event) {
    event.preventDefault();

    fetch('/api/user/', {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        method: 'post',
        body: JSON.stringify(this.state)
    }).then(function(response) {
        console.log(response);
    })
},

您还需要在 Express 应用中安装适当的中间件来解析 JSON 正文(例如 body-parser ):

var bodyParser = require('body-parser');

// ...

app.use(bodyParser.json());

app.post('/user', function(req, res) {
    //do something with the data
});