当前位置：首页 > news >正文

Fetch 是用于发起HTTP请求的API body 部分

news 来源：原创 2025/5/24 9:34:38

在JavaScript中，fetch 是用于发起HTTP请求的API，你提到的这些格式（form - data、x - www - form - urlencoded、json 等）主要用于设置 fetch 请求的 body 部分。以下是它们的使用示例：

1. `none`

当不需要发送请求体时使用，例如GET请求：

fetch('https://example.com/api/data',  { 
  method: 'GET' 
}) 
.then(response => response.json())  
.then(data => console.log(data))  
.catch(error => console.error('Error:',  error));

2. `form - data`

用于发送表单数据，通常用于上传文件或包含多种数据类型的表单：

const formData = new FormData(); 
formData.append('username',  'JohnDoe'); 
formData.append('password',  'secret'); 
formData.append('avatar',  fileInput.files[0]);  // 假设fileInput是一个<input type="file">元素 
 
fetch('https://example.com/api/submit',  { 
  method: 'POST', 
  body: formData 
}) 
.then(response => response.json())  
.then(data => console.log(data))  
.catch(error => console.error('Error:',  error));

3. `x - www - form - urlencoded`

将数据编码为URL查询字符串格式，常用于传统的表单提交：

const data = { 
  username: 'JohnDoe', 
  password: 'secret' 
}; 
const formBody = new URLSearchParams(); 
for (const key in data) { 
  formBody.append(key,  data[key]); 
} 
 
fetch('https://example.com/api/login',  { 
  method: 'POST', 
  headers: { 
    'Content - Type': 'application/x - www - form - urlencoded' 
  }, 
  body: formBody.toString()  
}) 
.then(response => response.json())  
.then(data => console.log(data))  
.catch(error => console.error('Error:',  error));

4. `json`

用于发送JSON格式的数据，这是现代Web API中最常见的方式：

const data = { 
  username: 'JohnDoe', 
  password: 'secret' 
}; 
 
fetch('https://example.com/api/login',  { 
  method: 'POST', 
  headers: { 
    'Content - Type': 'application/json' 
  }, 
  body: JSON.stringify(data)  
}) 
.then(response => response.json())  
.then(data => console.log(data))  
.catch(error => console.error('Error:',  error));

5. `xml`

用于发送XML格式的数据，虽然不如JSON流行，但在一些特定场景下仍有使用：

const xmlData = ` 
<user> 
  <username>JohnDoe</username> 
  <password>secret</password> 
</user> 
`; 
 
fetch('https://example.com/api/submit',  { 
  method: 'POST', 
  headers: { 
    'Content - Type': 'application/xml' 
  }, 
  body: xmlData 
}) 
.then(response => response.text())  
.then(data => console.log(data))  
.catch(error => console.error('Error:',  error));

6. `raw`

发送原始数据，可以是字符串、Blob等：

const rawData = 'This is raw data'; 
 
fetch('https://example.com/api/submit',  { 
  method: 'POST', 
  headers: { 
    'Content - Type': 'text/plain' 
  }, 
  body: rawData 
}) 
.then(response => response.text())  
.then(data => console.log(data))  
.catch(error => console.error('Error:',  error));

7. `binary`

用于发送二进制数据，例如文件内容。通常使用 Blob 或 ArrayBuffer：

const file = fileInput.files[0];  // 假设fileInput是一个<input type="file">元素 
 
fetch('https://example.com/api/upload',  { 
  method: 'POST', 
  body: file 
}) 
.then(response => response.json())  
.then(data => console.log(data))  
.catch(error => console.error('Error:',  error));

8. `GraphQL`

用于发送GraphQL查询或突变请求，通常将查询字符串作为请求体：

const graphQLQuery = ` 
query { 
  user(id: "123") { 
    username 
    email 
  } 
} 
`; 
 
fetch('https://example.com/graphql',  { 
  method: 'POST', 
  headers: { 
    'Content - Type': 'application/json' 
  }, 
  body: JSON.stringify({  query: graphQLQuery }) 
}) 
.then(response => response.json())  
.then(data => console.log(data))  
.catch(error => console.error('Error:',  error));

9. `msgpack`

MessagePack是一种高效的二进制序列化格式。使用时需要先安装 msgpack - lite 等库：

const msgpack = require('msgpack - lite'); 
const data = { 
  username: 'JohnDoe', 
  password: 'secret' 
}; 
const packedData = msgpack.encode(data);  
 
fetch('https://example.com/api/submit',  { 
  method: 'POST', 
  headers: { 
    'Content - Type': 'application/msgpack' 
  }, 
  body: packedData 
}) 
.then(response => response.arrayBuffer())  
.then(buffer => msgpack.decode(new  Uint8Array(buffer))) 
.then(data => console.log(data))  
.catch(error => console.error('Error:',  error));