fecth js是现代JavaScript中发起HTTP请求的核心API，基于Promise设计，语法简洁，是替代XMLHttpRequest的首选方案。
fecth js是什么？理解它的核心机制
fecth js原名fetch，是浏览器原生提供的全局函数，用于在网页中发起网络请求，它返回一个Promise对象，让异步操作变得可读、可维护，与早期开发的XMLHttpRequest相比，fecth js的代码量更少，并且天然支持Promise链式调用，无需手动处理状态变化。
fecth js与XMLHttpRequest的对比
| 特性 | fecth js | XMLHttpRequest |
|---|---|---|
| 语法 | 基于Promise，简洁直观 | 基于事件回调，代码冗长 |
| 请求取消 | 支持AbortController | 支持abort()方法 |
| 跨域请求 | 支持CORS，默认不发送凭证 | 同 |
| 默认Cookie | 不发送，需手动设置credentials | 同域自动发送 |
| 流式处理 | 支持ReadableStream | 不支持 |
| 错误处理 | 仅网络错误reject，4xx/5xx不reject | 同 |
从表中可以看出,fecth js在语法和现代特性上更胜一筹，社区共识认为，新项目推荐直接使用fecth js，而非继续封装XMLHttpRequest。
fecth js怎么用？从入门到实战
掌握基本用法是上手的起点,fecth js接收两个参数：资源URL和可选的配置对象，下面以最常见的GET和POST请求为例。
基本GET请求
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('请求失败', error));
- 第一步：发起请求，fecth返回Promise。
- 第二步：通过.then读取Response对象，调用json()方法解析JSON。
- 第三步：在catch中处理网络错误。
带参数的POST请求
fetch('https://api.example.com/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: '张三', age: 30 })
})
.then(res => res.json())
.then(result => console.log(result));
设置headers和body时需注意,fecth js默认不会自动序列化数据，需要手动调用JSON.stringify，接收方同样需要解析。
fecth js处理异步请求的常见模式
使用async/await可以让代码更接近同步风格：
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error(`HTTP错误: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('请求出错', error);
}
}
- 用await等待响应,用try/catch捕获异常。
- 检查response.ok属性，判断HTTP状态码是否在200-299范围内，fecth js只在网络失败时reject，4xx/5xx不会自动抛出错误，这是开发者容易忽略的细节。
fecth js在项目中的实际应用场景
在Vue组件中获取数据：
<template>
<div>{{ user }}</div>
</template>
<script>
export default {
async mounted() {
const res = await fetch('/api/user');
this.user = await res.json();
}
}
</script>
在React的useEffect中：
useEffect(() => {
fetch('/api/items')
.then(res => res.json())
.then(setItems);
}, []);
这些是实际开发中最常见的用法,直接使用原生fecth js，无需额外安装第三方库，对于轻量级项目完全够用。
fecth js和axios深度对比，哪个更适合你的项目？
很多开发者会在fecth js和axios之间做选择，两者都能发起HTTP请求，但在细节和功能上有明显差异。
核心差异对比表
| 维度 | fecth js | axios |
|---|---|---|
| 底层 | 浏览器原生API | 基于XMLHttpRequest的封装 |
| 大小 | 零体积（原生） | 约14KB（压缩后约4KB） |
| 请求拦截器 | 需手动实现 | 内置 |
| 响应拦截器 | 需手动实现 | 内置 |
| 自动转换JSON | 手动调用json() | 自动解析 |
| 超时设置 | 原生不支持，需结合AbortController | 支持timeout选项 |
| 进度事件 | 支持Download，但Upload需额外实现 | 支持上传下载进度 |
| 浏览器兼容 | 不支持IE，主流浏览器支持良好 | 支持IE11（需polyfill） |
使用场景建议
- 如果你的项目是中小型应用,不依赖复杂的拦截逻辑和超时控制，直接使用fecth js即可，省去额外依赖。
- 如果项目需要频繁设置请求拦截（如统一添加token）、自动处理超时、或者需要兼容老旧浏览器，axios是更稳妥的选择。
- 在服务端Node.js环境中，fecth js在18版本后已原生支持，但axios仍然是更成熟的方案。
fecth js常见问题与解决方案
fecth js默认不携带cookie怎么办？
fecth js在跨域请求时默认不发送cookie，如果需要携带，可以在配置中设置credentials选项：
fetch(url, {
credentials: 'include' // 或 'same-origin'
})
- ‘include’：无论跨域都发送凭证。
- ‘same-origin’：仅同源请求发送。
fecth js如何中断请求？
使用AbortController创建信号,传递给fecth的配置：
const controller = new AbortController();
const signal = controller.signal;
fetch(url, { signal })
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求被中断');
}
});
// 中断请求
controller.abort();
调用abort()后，fecth返回的Promise会被reject，错误类型为AbortError。
fecth js如何处理超时？
原生fecth没有超时选项,可以通过Promise.race或AbortController实现：
// 方式一：Promise.race
const timeoutPromise = new Promise((_, reject) =>
setTimeout(() => reject(new Error('请求超时')), 5000)
);
Promise.race([
fetch(url),
timeoutPromise
]).then(res => ...);
// 方式二：AbortController + setTimeout
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
fetch(url, { signal: controller.signal });
推荐使用AbortController,它更标准且可以配合多个请求。
fecth js作为浏览器原生提供的HTTP请求工具，在现代前端开发中占据重要地位，它语法简洁、基于Promise、无需额外依赖，适合大多数日常开发场景，它与axios各有优劣，选择时需根据项目需求权衡，掌握fecth js的基本用法、错误处理、中断与超时等技巧，能让你在处理异步请求时更加游刃有余。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/517158.html
