有了 ES2017async/await支持，这是POSTJSON 有效负载的方法：

(async () => {
  const rawResponse = await fetch('https://httpbin.org/post', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({a: 1, b: 'Textual content'})
  });
  const content = await rawResponse.json();

  console.log(content);
})();

不能使用 ES2017？使用Promise查看@vp_art 的答案

然而，问题是问一个由长期修复的 chrome 错误引起的问题。
原答案如下。

chrome devtools 甚至不显示 JSON 作为请求的一部分

这是这里的真正问题，它是chrome devtools的一个错误，已在 Chrome 46 中修复。

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

我希望看到我发回的对象

这不起作用，因为这不是JSfiddle 的 echo的正确格式。

在正确的代码是：

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 有效负载的端点，原始代码是正确的

我认为您的问题是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));

从搜索引擎，我最终在这个主题上使用 fetch 非 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字符串的另一种方法是使用库，而不是像我上面那样输入它。例如stringify来自query-string或qs包的功能。所以使用它看起来像：

import queryString from 'query-string'; // import the queryString class

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}) //use the stringify object of the queryString class
});

花了一些时间，逆向工程jsFiddle，尝试生成payload——有效果。

请注意（小心）在线return response.json();响应不是响应 - 这是Promise。

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/ && Firefox > 39 && Chrome > 42

如果您使用纯 json REST API，我已经创建了一个围绕 fetch() 的瘦包装器，并进行了许多改进：

// 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');
});