获取：POST JSON 数据

Question

我正在尝试 POST 使用 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

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

请注意在线 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/ && Firefox > 39 && Chrome > 42

Answer 2

使用 ES2017 async/await support，这是 POST JSON 有效负载的方法：

(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？参见@vp_art的

然而，问题是询问由 很久以来修复的 chrome 错误引起的问题。
原始答案如下。

chrome devtools doesn't even show the JSON as part of the request

这里是真正的问题，它是 bug with chrome devtools，已在 Chrome 46.

中修复

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

I'd expect to see the object I've sent back

那是行不通的，因为那不是 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 3

通过搜索引擎，我最终找到了这个主题 non-json 使用 fetch 发布数据，所以我想添加这个。

对于 non-json，您不必使用表单数据。您可以简单地将 Content-Type header 设置为 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 or qs 包中的 stringify 函数。所以使用它看起来像：

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

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:

，我已经围绕 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');
});

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 header 为我解决了这个问题：

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 => {
   ...
})

Answer 8

它可能对某人有用：

我遇到的问题是没有为我的请求发送表单数据

在我的例子中，以下 header 的组合也导致了问题和错误的 Content-Type。

所以我在请求中发送了这两个 header，当我删除有效的 header 时它没有发送表单数据。

"X-Prototype-Version" : "1.6.1",
"X-Requested-With" : "XMLHttpRequest"

此外，其他答案表明 Content-Type header 需要正确。

对于我的请求，正确的 Content-Type header 是：

"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"

所以底线是，如果您的表单数据未附加到请求，那么它可能是您的 header。尝试将您的 header 减到最少，然后尝试将它们一一添加，看看您的问题是否已解决。

Answer 9

我认为，我们不需要将 JSON 对象解析为字符串，如果远程服务器接受 json 到他们的请求中，只需运行:

const request = await fetch ('/echo/json', {
  headers: {
    'Content-type': 'application/json'
  },
  method: 'POST',
  body: { a: 1, b: 2 }
});

如curl请求

curl -v -X POST -H 'Content-Type: application/json' -d '@data.json' '/echo/json'

如果远程服务器不接受 json 文件作为正文，只需发送一个数据表单：

const data =  new FormData ();
data.append ('a', 1);
data.append ('b', 2);

const request = await fetch ('/echo/form', {
  headers: {
    'Content-type': 'application/x-www-form-urlencoded'
  },
  method: 'POST',
  body: data
});

如curl请求

curl -v -X POST -H 'Content-type: application/x-www-form-urlencoded' -d '@data.txt' '/echo/form'

Answer 10

最佳答案不适用于 PHP7，因为它的编码错误，但我可以通过其他答案找出正确的编码。此代码还发送身份验证 cookie，您在处理例如PHP 论坛：

julia = function(juliacode) {
    fetch('julia.php', {
        method: "POST",
        credentials: "include", // send cookies
        headers: {
            'Accept': 'application/json, text/plain, */*',
            //'Content-Type': 'application/json'
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" // otherwise $_POST is empty
        },
        body: "juliacode=" + encodeURIComponent(juliacode)
    })
    .then(function(response) {
        return response.json(); // .text();
    })
    .then(function(myJson) {
        console.log(myJson);
    });
}

Answer 11

如果您的 JSON 负载包含数组和嵌套对象，我会使用 URLSearchParams 和 jQuery 的 param() 方法。

fetch('/somewhere', {
  method: 'POST',
  body: new URLSearchParams($.param(payload))
})

对于您的服务器，这看起来像是正在 POSTed 的标准 HTML <form>。

Answer 12

您可以使用 fill-fetch，它是 fetch 的扩展。简单地说，你可以post数据如下：

import { fill } from 'fill-fetch';

const fetcher = fill();

fetcher.config.timeout = 3000;
fetcher.config.maxConcurrence = 10;
fetcher.config.baseURL = 'http://www.github.com';

const res = await fetcher.post('/', { a: 1 }, {
    headers: {
        'bearer': '1234'
    }
});

Answer 13

您只需要检查响应是否正常，因为调用未返回任何内容。

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((response) => {if(response.ok){alert("the call works ok")}})
.catch (function (error) {
    console.log('Request failed', error);
});

Answer 14

我的简单目标是js object ->-> php $_POST

Object.defineProperties(FormData.prototype, { // extend FormData for direct use of js objects
    load: {
       value: function (d) {
                   for (var v in d) {
                      this.append(v, typeof d[v] === 'string' ? d[v] : JSON.stringify(d[v]));
                   }
               }
           }
   })

var F = new FormData;
F.load({A:1,B:2});

fetch('url_target?C=3&D=blabla', {
        method: "POST", 
          body: F
     }).then( response_handler )

Answer 15

你可以用 await/async 做得更好。

http请求参数：

const _url = 'https://jsonplaceholder.typicode.com/posts';
let _body = JSON.stringify({
  title: 'foo',
  body: 'bar',
  userId: 1,
});
  const _headers = {
  'Content-type': 'application/json; charset=UTF-8',
};
const _options = { method: 'POST', headers: _headers, body: _body };

使用干净的 async/await 语法：

const response = await fetch(_url, _options);
if (response.status >= 200 && response.status <= 204) {
  let data = await response.json();
  console.log(data);
} else {
  console.log(`something wrong, the server code: ${response.status}`);
}

老式的 fetch().then().then():

fetch(_url, _options)
  .then((res) => res.json())
  .then((json) => console.log(json));

Answer 16

2021 答案：以防万一您在这里寻找如何使用 async/await 或 promises 进行 GET 和 POST 获取 api 请求，与 axios 相比。

我正在使用 jsonplaceholder fake API 来演示：

获取 api GET 请求使用 async/await:

         const asyncGetCall = async () => {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/posts');
                 const data = await response.json();
                // enter you logic when the fetch is successful
                 console.log(data);
               } catch(error) {
            // enter your logic for when there is an error (ex. error toast)
                  console.log(error)
                 } 
            }


          asyncGetCall()

获取 api POST 请求使用 async/await:

    const asyncPostCall = async () => {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
                 method: 'POST',
                 headers: {
                   'Content-Type': 'application/json'
                   },
                   body: JSON.stringify({
             // your expected POST request payload goes here
                     title: "My post title",
                     body: "My post content."
                    })
                 });
                 const data = await response.json();
              // enter you logic when the fetch is successful
                 console.log(data);
               } catch(error) {
             // enter your logic for when there is an error (ex. error toast)

                  console.log(error)
                 } 
            }

asyncPostCall()

使用 Promises 的 GET 请求：

  fetch('https://jsonplaceholder.typicode.com/posts')
  .then(res => res.json())
  .then(data => {
   // enter you logic when the fetch is successful
    console.log(data)
  })
  .catch(error => {
    // enter your logic for when there is an error (ex. error toast)
   console.log(error)
  })

POST 使用 Promises 的请求：

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
   body: JSON.stringify({
     // your expected POST request payload goes here
      title: "My post title",
      body: "My post content."
      })
})
  .then(res => res.json())
  .then(data => {
   // enter you logic when the fetch is successful
    console.log(data)
  })
  .catch(error => {
  // enter your logic for when there is an error (ex. error toast)
   console.log(error)
  })

使用 Axios 的 GET 请求：

        const axiosGetCall = async () => {
            try {
              const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')
    // enter you logic when the fetch is successful
              console.log(`data: `, data)
           
            } catch (error) {
    // enter your logic for when there is an error (ex. error toast)
              console.log(`error: `, error)
            }
          }
    
    axiosGetCall()

POST 使用 Axios 请求：

const axiosPostCall = async () => {
    try {
      const { data } = await axios.post('https://jsonplaceholder.typicode.com/posts',  {
      // your expected POST request payload goes here
      title: "My post title",
      body: "My post content."
      })
   // enter you logic when the fetch is successful
      console.log(`data: `, data)
   
    } catch (error) {
  // enter your logic for when there is an error (ex. error toast)
      console.log(`error: `, error)
    }
  }


axiosPostCall()

获取：POST JSON 数据

Fetch: POST JSON data

javascript

json

fetch-api