Я пытаюсь поместить объект JSON, используя fetch .
Из того, что я могу понять, мне нужно прикрепить строковый объект к телу запроса, например:
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) })
При использовании json echo в jsfiddle я ожидаю увидеть объект, который я отправил ( {a: 1, b: 2}
) назад, но этого не происходит - chrome devtools даже не отображает JSON как часть запроса, что означает, что он не отправляется.
javascript
json
fetch-api
бритва
источник
источник
{}
res.json()
должен вернуться{a: 1, b: 2}
.json
свойство, которое содержит данные, которые вы хотите отправить. Тем не менее, я всеbody
равно не лечится правильно. Посмотрите эту скрипку, чтобы увидеть, что задержка в 5 секунд пропускается. jsfiddle.net/99arsnkg Также, когда вы пытаетесь добавить дополнительные заголовки, они игнорируются. Это, вероятно, проблема сfetch()
самим собой.Ответы:
С
async/await
поддержкой ES2017 вот как можноPOST
получить полезную нагрузку JSON:Не можете использовать ES2017? Смотрите ответ @ vp_art, используя обещания
Однако возникает вопрос о проблеме, вызванной давно исправленной ошибкой Chrome.
Оригинальный ответ следует.
Это реальная проблема здесь , и это ошибка в Chrome Devtools , исправленная в Chrome 46.
Этот код работает нормально - он правильно размещает JSON, его просто не видно.
это не работает, потому что это не правильный формат для эха JSfiddle .
Правильный код является:
Для конечных точек, принимающих полезные нагрузки JSON, оригинальный код верен
источник
x-www-form-urlencoded
) с данными JSON в поле с именемjson
. Таким образом, данные кодируются вдвойне. Чистую статью в формате JSON смотрите в ответе @vp_arth ниже.res.ok
если код ответа является своего рода ошибкой. Также было бы хорошо иметь.catch()
предложение в конце. Я понимаю, что это всего лишь образец фрагмента, но имейте это в виду для использования в реальном мире.Я думаю, что ваша проблема
jsfiddle
может обработатьform-urlencoded
только запрос.Но правильный способ сделать JSON-запрос - передать правильное
json
тело:источник
x-www-form-urlencoded
vsapplication/json
, либо не соответствуя им, либо дважды заключая JSON в строки, закодированные в URL./echo
маршрута jsfiddle ?Из поисковых систем я остановился на этой теме для публикации данных не-json с fetch, поэтому подумал, что добавлю это.
Для не-JSON вам не нужно использовать данные формы. Вы можете просто установить
Content-Type
заголовокapplication/x-www-form-urlencoded
и использовать строку:Альтернативный способ построить эту
body
строку, а не печатать ее, как я делал выше, - это использовать библиотеки. Например,stringify
функция изquery-string
илиqs
пакетов. Таким образом, используя это будет выглядеть так:источник
Потратив несколько раз, реверс-инжиниринг jsFiddle, пытаясь сгенерировать полезную нагрузку - эффект есть.
Пожалуйста, обратите внимание на линию,
return response.json();
где ответ - это не ответ, а обещание.jsFiddle: http://jsfiddle.net/egxt6cpz/46/ && Firefox> 39 && Chrome> 42
источник
'x-www-form-urlencoded
вместоapplication/json
? Какая разница?application/json
это правильная форма, и она работает сейчас. Спасибо за хороший глазfetch
( stackoverflow.com/questions/41984893/… ) вместоapplication/json
. Возможно, вы знаете, почему ...Content-Type
Естьapplication/json
, но фактические ,body
кажется,x-www-form-urlencoded
- я не думаю , что это должно работать? Если это работает, ваш сервер должен быть довольно щадящим. Ответ @vp_arth ниже выглядит правильным.Я создал тонкую оболочку для fetch () со многими улучшениями, если вы используете исключительно JSON REST API:
Для его использования у вас есть переменная
api
и 4 метода:И внутри
async
функции:Пример с jQuery:
источник
Object.assign
? должно бытьObject.assign({}, api.headers, headers)
потому, что вы не хотите продолжать добавлять пользовательскийheaders
в общий хешapi.headers
. правильно?Это связано с
Content-Type
. Как вы могли заметить из других обсуждений и ответов на этот вопрос, некоторые люди смогли решить его, установивContent-Type: 'application/json'
. К сожалению, в моем случае это не сработало, мой POST-запрос все еще был пустым на стороне сервера.Однако, если вы попробуете с jQuery,
$.post()
и он работает, причина, вероятно, в том, чтоContent-Type: 'x-www-form-urlencoded'
вместо jQuery используетсяapplication/json
.источник
Была такая же проблема - нет
body
было отправлено с клиента на сервер.Добавление
Content-Type
заголовка решило это для меня:источник
Верхний ответ не работает для PHP7, потому что он имеет неправильную кодировку, но я мог бы найти правильную кодировку с другими ответами. Этот код также отправляет куки аутентификации, которые вы, вероятно, хотите иметь, например, на PHP-форумах:
источник
Это может быть полезно для кого-то:
У меня была проблема, что формальные данные не отправлялись для моего запроса
В моем случае это была комбинация следующих заголовков, которые также вызывали проблему и неправильный Content-Type.
Таким образом, я отправлял эти два заголовка с запросом, и он не отправлял форм-данные, когда я удалял работающие заголовки.
Также как и другие ответы предполагают, что заголовок Content-Type должен быть правильным.
Для моего запроса правильный заголовок Content-Type был:
Итак, суть в том, что ваши форм-данные не привязаны к запросу, тогда это могут быть ваши заголовки. Попробуйте свести заголовки к минимуму, а затем попробуйте добавить их один за другим, чтобы увидеть, решена ли ваша проблема.
источник
Я думаю, что нам не нужно анализировать объект JSON в строку, если удаленный сервер принимает json в свой запрос, просто запустите:
Такие как запрос curl
Если удаленная служба не принимает файл json в качестве тела, просто отправьте dataForm:
Такие как запрос curl
источник
curl
команда делает неявно! Если вы не упорядочиваете свои объекты перед тем, как передать их,body
вы просто отправите их"[object Object]"
как тело запроса. Простой тест в Dev Tools покажет вам это. Откройте его и попробуйте, не выходя из этой вкладки:a = new FormData(); a.append("foo","bar"); fetch("/foo/bar", { method: 'POST', body: {}, headers: { 'Content-type': 'application/json' } })
Если ваша полезная нагрузка JSON содержит массивы и вложенные объекты, я бы использовал метод
URLSearchParams
jQueryparam()
.Чтобы ваш сервер, это будет выглядеть как стандартный HTML
<form>
существо подPOST
ред.источник