取：POST JSON数据

Question

我想使用fetch发布一个JSON对象。

从我能理解，我需要一个字符串化对象附加到请求的主体，如：

fetch("/echo/json/", 
{ 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
    }, 
    method: "POST", 
    body: JSON.stringify({a: 1, b: 2}) 
}) 
.then(function(res){ console.log(res) }) 
.catch(function(res){ console.log(res) }) 

当使用jsfiddle's json echo我希望看到我送的对象（{a: 1, b: 2} ），但这不会发生 - chrome devtools甚至不会将JSON显示为请求的一部分，这意味着它不会被发送。

Answer 1

铬devtools甚至不显示的JSON作为请求

的一部分。这是真正的问题在这里，它是一个bug with chrome devtools，固定在Chrome 46.

该代码工作正常 - 它正确发布JSON，它只是无法看到。

我希望看到的是不工作我送回

的对象，因为这不是correct format for JSfiddle's echo。

的correct code是：

var payload = { 
    a: 1, 
    b: 2 
}; 

var data = new FormData(); 
data.append("json", JSON.stringify(payload)); 

fetch("/echo/json/", 
{ 
    method: "POST", 
    body: data 
}) 
.then(function(res){ return res.json(); }) 
.then(function(data){ alert(JSON.stringify(data)) }) 

对于端点接受JSON有效载荷，原来的代码是正确的

Answer 2

经过一段时间后，反向工程jsFiddle，试图产生有效载荷 - 有一个效果。

请注意行return response.json();行（护理），其中响应不是一个响应 - 这是承诺。

var json = { 
    json: JSON.stringify({ 
     a: 1, 
     b: 2 
    }), 
    delay: 3 
}; 

fetch('/echo/json/', { 
    method: 'post', 
    headers: { 
     'Accept': 'application/json, text/plain, */*', 
     'Content-Type': 'application/json' 
    }, 
    body: 'json=' + encodeURIComponent(JSON.stringify(json.json)) + '&delay=' + json.delay 
}) 
.then(function (response) { 
    return response.json(); 
}) 
.then(function (result) { 
    alert(result); 
}) 
.catch (function (error) { 
    console.log('Request failed', error); 
}); 

的jsfiddle：http://jsfiddle.net/egxt6cpz/46/ & &火狐> 39 & &铬> 42个

Answer 3

来自搜索引擎，我结束了对这个话题有取非JSON帐数据，所以想到我会补充这一点。

对于非json您不必使用表单数据。你可以简单的Content-Type头设置为application/x-www-form-urlencoded和使用字符串：

fetch('url here', { 
    method: 'POST', 
    headers: {'Content-Type':'application/x-www-form-urlencoded'}, // this line is important, if this content-type is not set it wont work 
    body: 'foo=bar&blah=1' 
}); 

的另一种方式来构建body字符串，而不是键入它作为我上面那样使用库。例如query-string或qs封装的stringify功能。因此，使用这一点，看起来像：

import queryString from 'query-string'; 
fetch('url here', { 
    method: 'POST', 
    headers: {'Content-Type':'application/x-www-form-urlencoded'}, // this line is important, if this content-type is not set it wont work 
    body: queryString.stringify({for:'bar', blah:1} 
}); 

Answer 4

我觉得你的问题是jsfiddle只能处理form-urlencoded请求。

但是，为了使JSON请求正确的方法是通过正确的json为一体：

fetch('https://httpbin.org/post', { 
 
    method: 'post', 
 
    headers: { 
 
    'Accept': 'application/json, text/plain, */*', 
 
    'Content-Type': 'application/json' 
 
    }, 
 
    body: JSON.stringify({a: 7, str: 'Some string: &=&'}) 
 
}).then(res=>res.json()) 
 
    .then(res => console.log(res));

Answer 5

我有，如果你使用的是创建一个简单包装的取（）有许多改进纯粹的JSON REST API：

// Small library to improve on fetch() usage 
const api = function(method, url, data, headers = {}){ 
    return fetch(url, { 
    method: method.toUpperCase(), 
    body: JSON.stringify(data), // send it as stringified json 
    credentials: api.credentials, // to keep the session on the request 
    headers: Object.assign({}, api.headers, headers) // extend the headers 
    }).then(res => res.ok ? res.json() : Promise.reject(res)); 
}; 

// Defaults that can be globally overwritten 
api.credentials = 'include'; 
api.headers = { 
    'csrf-token': window.csrf || '', // only if globally set, otherwise ignored 
    'Accept': 'application/json',  // receive json 
    'Content-Type': 'application/json' // send json 
}; 

// Convenient methods 
['get', 'post', 'put', 'delete'].forEach(method => { 
    api[method] = api.bind(null, method); 
}); 

要使用它，你有变量api和4的方法：

api.get('/todo').then(all => { /* ... */ }); 

而一个async函数内：

const all = await api.get('/todo'); 
// ... 

实施例与jQuery：

$('.like').on('click', async e => { 
    const id = 123; // Get it however it is better suited 

    await api.put(`/like/${id}`, { like: true }); 

    // Whatever: 
    $(e.target).addClass('active dislike').removeClass('like'); 
}); 

Answer 6

这与Content-Type。正如你可能从其他讨论和这个问题的答案中已经注意到的，有些人可以通过设置Content-Type: 'application/json'来解决这个问题。不幸的是，在我的情况下，它不起作用，我的POST请求在服务器端仍然是空的。

但是，如果你尝试使用jQuery的$.post()，它的工作原理可能是因为jQuery使用Content-Type: 'x-www-form-urlencoded'而不是application/json。

data = Object.keys(data).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])).join('&') 
fetch('/api/', { 
    method: 'post', 
    credentials: "include", 
    body: data, 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
}) 

Answer 7

有同样的问题 - 没有body是从客户端发送到服务器。

添加Content-Type头解决了这个问题对我来说：

var headers = new Headers(); 

headers.append('Accept', 'application/json'); // This one is enough for GET requests 
headers.append('Content-Type', 'application/json'); // This one sends body 

return fetch('/some/endpoint', { 
    method: 'POST', 
    mode: 'same-origin', 
    credentials: 'include', 
    redirect: 'follow', 
    headers: headers, 
    body: JSON.stringify({ 
     name: 'John', 
     surname: 'Doe' 
    }), 
}).then(resp => { 
    ... 
}).catch(err => { 
    ... 
})