本文主要是介绍javascript fetch 用法讲解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
《javascriptfetch用法讲解》fetch是一个现代化的JavaScriptAPI,用于发送网络请求并获取资源,它是浏览器提供的全局方法,可以替代传统的XMLHttpRequest,这篇...
fetch 的详细讲解
fetch 是一个现代化的 JavaScript API，用于发送网络请求并获取资源。它是浏览器提供的全局方法，可以替代传统的 XMLHttpRequest。fetch 支持 Promise，因此更易用且代码更清晰。
1. 基本语法
1.1 语法
fetch(url, options) .then(response => response.json()) .then(data =&gphpt; console.log(data)) .catch(error => console.error('Error:', error));
参数：
url：请求的资源地址。options：可选参数，用于配置请求（如方法、头部信息、请求体等）。
返回值：
- 一个
Promise，解析为Response对象。
1.2 示例：简单 GET 请求
fetch('https://api.example.com/data')
.then(response => response.json()) // 将响应解析为 JSON
.then(data => console.log(data)) // 输出解析后的数据
.catch(error => console.error('Error:', error)); // 捕获请求错误2. Response 对象
Response 对象表示 fetch 请求的结果，包含以下常用属性和方法：
status：HTTP 状态码。
fetch('https://api.example.com')
.then(response => {
console.log(response.status); // 200, 404 等
});ok：布尔值，表示请求是否成功（状态码在 200-299 之间）。
fetch('https://api.example.com'http://www.chinasem.cn)
.then(response => {
if (response.ok) {
console.log('Request was successful');
} else {
console.error('Request failed');
}
});json()：将响应解析为 JSON。
fetch('https://api.example.com')
.then(response => response.json())
.then(data => console.log(data));text()：将响应解析为纯文本。
fetch('https://api.example.com')
.then(response => response.text())
.then(data => console.log(data));headers：响应头部信息。
fetch('https://api.example.com')
.then(response => {
console.log(response.headers.get('Content-Type'));
});3. 配置请求
fetch 的第二个参数 options 用于配置请求方法、头部信息、请求体等。
3.1 常用配置
| 选项 | 描述 | 示例值 |
|---|---|---|
method | HTTP 请求方法，默认是 GET | GET, POST, PUT |
headers | 请求头部信息，用于传递内容类型或认证信息 | { 'Content-Type': 'application/json' } |
body | 请求体，用于发送数据（POST 和 PUT 请求中使用） | JSON.stringify({...}) |
mode | 请求模式，默认是 cors | cors, no-cors, same-origin |
credentials | 是否携带凭据，如 cookies | same-origin, include |
cache | 缓存模式 | default, no-store, reload |
3.2 示例：POST 请求
发送一个包含 JSON 数据的 POST 请求：
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'John Doe',
age: 30,
}),
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));3.3 示例：自定义请求头
向 API 添加身份验证令牌：
fetch('https://api.example.com/data', {
headers: {
'Authorization': 'Bearer YOUR_TOKEN',
},
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));4. 错误处理
fetch 的 Promise 只有在网络错误时才会拒绝，比如断网或无法解析域名。HTTP 错误状态码（如 404 或 500）不会自动触发 catch。
4.1 检查响应状态
需要手动检查 response.ok 或 response.status：
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));5. 超时和取消请求
fetch 本身不支持超时或取消请求，可以通过 AbortController 实现。
5.1 设置请求超时
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 秒后中止请求
fetch('https://api.example.com/data', { signal: controller.signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
if (error.njavascriptame === 'AbortError') {
console.error('Fetch aborted!');
} else {
console.error('Error:', error);
}
});
// 清除超时
clearTimeout(timeoutId);6. CORS（跨域请求）
如果请求跨域资源，服务端需要设置 Access-Control-Allow-Origin 头部。如果没有配置，浏览器会拒绝跨域请求。
示例：配置 CORS
服务端需要添加类似以下的头部信息：
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
7. 与 Axios 的对比
fetch 和 Axios 都是常用的网络请求工具，但有一些差异：
| 特性 | fetch | Axios |
|---|---|---|
| API 原生支持 | 内置于浏览器，无需安装额外库 | 需要安装第三方库 |
| Promise 支持 | 原生支持 | 原生支持 |
| 默认错误处理 | 只处理网络错误，不自动处理 HTTP 错误状态 | 自动抛出 HTTP 错误 |
| 自动序列化 JSON | 需要手动解析响应为 JSON | 自动解析 JSON 响应 |
| 支持取消请求 | 使用 AbortController 实现 | 内置取消功能 |
| 灵活性 | 标准化 API，更适合简单场景 | 功能丰富，适合复杂场景 |
8. 高级用法
8.1 流式响应（ReadableStream）
fetch 可以处理流式响应（比如逐步加载大文件）：
fetch('https://api.example.com/stream')
.then(response => response.body)
.then(stream => {
const reader = stream.getReader();
const decoder = new TextDecoder('utf-8');
reader.read().then(function processText({ done, value }) {
if (done) {
www.chinasem.cn console.log('Stream finished');
return;
}
console.log(decoder.decode(value));
return reader.read().then(processText);
});
});9. 常见问题
9.1 CORS 错误
- 浏览器跨域请求时，服务端未正确配置
CORS。 - 解决方案：
- 服务端设置
Access-Control-Allow-Origin。 - 使用代理服务器避免跨域。
- 服务端设置
9.2 网络超时
fetch默认没有超时，可以使用AbortController设置超时。
9.3 JSON 解析错误
如果 API 返回非 JSON 数据，调用 response.json() 会报错：
fetch('https://api.example.com/data')
.then(response => response.json())
.catch(error => consoChina编程le.error('Invalid JSON:', error));10. 总结
fetch 是一个强大且现代化的网络请求工具，适合大部分 Web 开发场景：
- 优点：原生支持、Promise API、更清晰的语法。
- 缺点：错误处理需要手动检查、默认不支持超时和取消。
对于简单场景，fetch 是首选；对于更复杂的场景（如请求超时、丰富的配置需求），可以考虑使用 Axios 等第三方库。
到此这篇关于javascript fetch 讲解的文章就介绍到这了,更多相关javascript fetch内容请搜索编程China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持China编程(www.chinasem.cn)！
这篇关于javascript fetch 用法讲解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
