我试图使用fetch POST一个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的JSON回显时，我希望看到我发送的对象({a: 1, b: 2})回来，但这不会发生- chrome devtools甚至不显示JSON作为请求的一部分，这意味着它没有被发送。
当前回答
它可能对某些人有用:
我遇到的问题是，formdata没有为我的请求发送
在我的案例中，是以下标题的组合也导致了这个问题和错误的Content-Type。
我和请求一起发送了这两个头文件当我删除了工作的头文件时它并没有发送formdata。
"X-Prototype-Version": "1.6.1"， "X-Requested-With": "XMLHttpRequest"
另外，其他答案表明，Content-Type头需要正确。
对于我的请求，正确的Content-Type头是:
“内容类型”:“应用程序/ x-www-form-urlencoded;charset = utf - 8”
所以底线是，如果你的formdata没有附加到Request，那么它可能是你的header。试着减少标题，然后一个一个地添加它们，看看你的问题是否得到解决。
其他回答
它可能对某些人有用:
我遇到的问题是，formdata没有为我的请求发送
在我的案例中，是以下标题的组合也导致了这个问题和错误的Content-Type。
我和请求一起发送了这两个头文件当我删除了工作的头文件时它并没有发送formdata。
"X-Prototype-Version": "1.6.1"， "X-Requested-With": "XMLHttpRequest"
另外，其他答案表明，Content-Type头需要正确。
对于我的请求，正确的Content-Type头是:
“内容类型”:“应用程序/ x-www-form-urlencoded;charset = utf - 8”
所以底线是，如果你的formdata没有附加到Request，那么它可能是你的header。试着减少标题，然后一个一个地添加它们，看看你的问题是否得到解决。
我认为，我们不需要将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文件作为主体，只需发送一个dataForm:
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'
有同样的问题-没有身体从客户端发送到服务器。 添加内容类型头为我解决了这个问题:
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 => {
...
})
您可以使用fill-fetch，这是fetch的扩展。简单地说，你可以像下面这样发布数据:
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'
}
});
2021年的答案:以防你在这里寻找如何使用async/await或promises来进行GET和POST Fetch api请求，而不是axios。
我使用jsonplaceholder伪API来演示:
使用async/await获取api GET请求:
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()
使用async/await获取api POST请求:
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获取请求:
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请求:
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获取请求:
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()
使用Axios的POST请求:
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()
