使用 Fetch API 发布请求？
[英]POST Request with Fetch API?
问题描述
I know that with the new Fetch API (used here with ES2017's async / await ) you can make a GET request like this:
我知道使用新的 Fetch API（在这里与 ES2017 的async / await一起使用）你可以发出这样的 GET 请求：
async getData() {
try {
let response = await fetch('https://example.com/api');
let responseJson = await response.json();
console.log(responseJson);
} catch(error) {
console.error(error);
}
}
But how do you make a POST request?但是如何发出 POST 请求呢？
7 个解决方案
解决方案1
102 已采纳 2016-09-19 05:11:39
Long story short, Fetch also allows you to pass an object for a more personalized request:长话短说，Fetch 还允许您传递一个对象来实现更个性化的请求：
fetch("http://example.com/api/endpoint/", {
method: "post",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
//make sure to serialize your JSON body
body: JSON.stringify({
name: myName,
password: myPassword
})
})
.then( (response) => {
//do something awesome that makes the world a better place
});
Check out the fetch documentation for even more goodies and gotchas:查看 fetch 文档以获取更多好东西和陷阱：
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Please note that since you're doing an async try/catch pattern, you'll just omit the then() function in my example ;)请注意，由于您正在执行异步 try/catch 模式，因此您只需在我的示例中省略then()函数；)
解决方案2
19 2017-05-14 13:15:14
if you want to make a simple post request without sending data as JSON.如果您想在不将数据作为 JSON 发送的情况下进行简单的发布请求。
fetch("/url-to-post",
{
method: "POST",
// whatever data you want to post with a key-value pair
body: "name=manas&age=20",
headers:
{
"Content-Type": "application/x-www-form-urlencoded"
}
}).then((response) =>
{
// do something awesome that makes the world a better place
});
解决方案3
8 2019-07-30 21:43:55
The best way to POST form data to a PHP-script is the Fetch API .将表单数据 POST 到 PHP 脚本的最佳方式是Fetch API 。 Here is an example:下面是一个例子：
function postData() { const form = document.getElementById('form') let data = new FormData() data.append('name', form.name.value) fetch('../php/contact.php', { method: 'POST', body: data, }).then(response => { if (!response.ok) { throw new Error('Network response was not ok.') } }).catch(console.error) }
<form id="form" action="javascript:postData()"> <input id="name" name="name" placeholder="Name" type="text" required> <input type="submit" value="Submit"> </form>
Here is a very basic example of a PHP-script that takes the data and sends an email:这是一个非常基本的 PHP 脚本示例，它接收数据并发送电子邮件：
<?php
header('Content-type: text/html; charset=utf-8');
if (isset($_POST['name'])) {
$name = $_POST['name'];
}
$to = "test@example.com";
$subject = "New name submitted";
$body = "You received the following name: $name";
mail($to, $subject, $body);
解决方案4
3 2019-11-22 17:48:55
Here is a solution for a POST request using node-fetch, with async/await.这是使用 node-fetch 和 async/await 的 POST 请求的解决方案。
async function post(data) {
try {
// Create request to api service
const req = await fetch('http://127.0.0.1/api', {
method: 'POST',
headers: { 'Content-Type':'application/json' },
// format the data
body: JSON.stringify({
id: data.id,
foo: data.foo,
bar: data.bar
}),
});
const res = await req.json();
// Log success message
console.log(res);
} catch(err) {
console.error(`ERROR: ${err}`);
}
}
// Call your function
post() // with your parameter of Course
解决方案5
1 2019-06-26 23:05:14
Here is a complete example: After spending hours tinkering with incomplete code snippets I finally managed to post some json from javascript, pick it up using php on a server, added a data field and finally updated the original web page.这是一个完整的示例：在花了几个小时修补不完整的代码片段之后，我终于设法从 javascript 发布了一些 json，在服务器上使用 php 获取它，添加了一个数据字段，最后更新了原始网页。 Here is the HTML, the PHP and the JS.这是 HTML、PHP 和 JS。 My thanks to everyone who posted the original code fragments collected here.我感谢所有发布这里收集的原始代码片段的人。 Similar code is on-line here: https://www.nbest.co.uk/Fetch/index.php网上有类似的代码： https : //www.nbest.co.uk/Fetch/index.php
<!DOCTYPE HTML>
<!-- Save this to index.php and view this page in your browser -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Fetch Example</title>
</head>
<body>
<h1>Javascript Fetch Example</h1>
<p>Save this to index.php and view this page in your browser.</p>
<button type="button" onclick="myButtonClick()">Press Me</button>
<p id="before">This is the JSON before the fetch.</p>
<p id="after">This is the JSON after the fetch.</p>
<script src="fetch.js"></script>
</body>
</html>
<!-- --------------------------------------------------------- -->
// Save this as fetch.js --------------------------------------------------------------------------
function success(json) {
document.getElementById('after').innerHTML = "AFTER: " + JSON.stringify(json);
console.log("AFTER: " + JSON.stringify(json));
} // ----------------------------------------------------------------------------------------------
function failure(error) {
document.getElementById('after').innerHTML = "ERROR: " + error;
console.log("ERROR: " + error);
} // ----------------------------------------------------------------------------------------------
function myButtonClick() {
var url = 'json.php';
var before = {foo: 'Hello World!'};
document.getElementById('before').innerHTML = "BEFORE: " + JSON.stringify(before);
console.log("BEFORE: " + JSON.stringify(before));
fetch(url, {
method: 'POST',
body: JSON.stringify(before),
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => success(response))
.catch(error => failure(error));
} // ----------------------------------------------------------------------------------------------
<?php
// Save this to json.php ---------------------------------------
$contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';
if ($contentType === "application/json") {
$content = trim(file_get_contents("php://input"));
$decoded = json_decode($content, true);
$decoded['bar'] = "Hello World AGAIN!"; // Add some data to be returned.
$reply = json_encode($decoded);
}
header("Content-Type: application/json; charset=UTF-8");
echo $reply;
// -------------------------------------------------------------
?>
解决方案6
1 2021-05-16 14:45:27
2021 answer: just in case you land here looking for how to make GET and POST Fetch api requests using async/await or promises as compared to axios. 2021 年答案：以防万一您登陆这里寻找与 axios 相比如何使用 async/await 或 promises 进行 GET 和 POST Fetch api 请求。
I'm using jsonplaceholder fake API to demonstrate:我正在使用 jsonplaceholder fake API 来演示：
Fetch api GET request using async/await:使用 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()
Fetch api POST request using async/await:使用 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()
GET request using Promises:使用 Promise 的 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 request using Promises:使用 Promise 的 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)
})
GET request using Axios:使用 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 request using Axios:使用 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()
解决方案7
0 2021-01-12 21:29:17
In this article , I described about the Second Parameter of fetch().在本文中，我描述了 fetch() 的第二个参数。
For submit JSON data用于提交 JSON 数据
const user = { name: 'Sabesan', surname: 'Sathananthan' };
const response = await fetch('/article/fetch/post/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(user)
});
For submit form对于提交表单
const form = document.querySelector('form');
const response = await fetch('/users', {
method: 'POST',
body: new FormData(form)
})
For file upload用于文件上传
const input = document.querySelector('input[type="file"]');
const data = new FormData();
data.append('file', input.files[0]);
data.append('user', 'foo');
fetch('/avatars', {
method: 'POST',
body: data
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.