在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));