mirror of
https://github.com/Estom/notes.git
synced 2026-02-03 10:33:35 +08:00
55 lines
1.7 KiB
Markdown
55 lines
1.7 KiB
Markdown
## 1 简介
|
||
|
||
参考文件：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
|
||
|
||
## 2 使用
|
||
### 基本用法
|
||
|
||
```js
|
||
// Example POST method implementation:
|
||
async function postData(url = "", data = {}) {
|
||
// Default options are marked with *
|
||
const response = await fetch(url, {
|
||
method: "POST", // *GET, POST, PUT, DELETE, etc.
|
||
mode: "cors", // no-cors, *cors, same-origin
|
||
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
|
||
credentials: "same-origin", // include, *same-origin, omit
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
// 'Content-Type': 'application/x-www-form-urlencoded',
|
||
},
|
||
redirect: "follow", // manual, *follow, error
|
||
referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
|
||
body: JSON.stringify(data), // body data type must match "Content-Type" header
|
||
});
|
||
return response.json(); // parses JSON response into native JavaScript objects
|
||
}
|
||
|
||
postData("https://example.com/answer", { answer: 42 }).then((data) => {
|
||
console.log(data); // JSON data parsed by `data.json()` call
|
||
});
|
||
|
||
```
|
||
|
||
|
||
### 上传文件
|
||
|
||
```js
|
||
const formData = new FormData();
|
||
const fileField = document.querySelector('input[type="file"]');
|
||
|
||
formData.append("username", "abc123");
|
||
formData.append("avatar", fileField.files[0]);
|
||
|
||
fetch("https://example.com/profile/avatar", {
|
||
method: "PUT",
|
||
body: formData,
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
console.log("Success:", result);
|
||
})
|
||
.catch((error) => {
|
||
console.error("Error:", error);
|
||
});
|
||
``` |