JS中的fetch怎么用？和ajax有什么区别？

fetch 的基本用法是传入 URL 发起 GET 请求，或通过配置项发起 POST 请求，返回 Promise 对象；与 AJAX 的主要区别在于语法风格、默认行为、兼容性及功能控制能力。

fetch 的基本用法

GET 请求：只需传入 URL 即可发起请求，通过链式调用 .then() 处理响应数据，.catch() 捕获错误。示例代码如下：

fetch('

https://api.example.com/data'

) .then(response => response.json()) // 将响应体解析为 JSON .then(data => console.log(data)) // 处理数据 .catch(error => console.error('出错了:', error)); // 错误处理

POST 请求：需通过配置项指定方法、请求头和请求体。示例代码如下：

fetch('

https://api.example.com/submit'

, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Tom' }) // 将数据转为 JSON 字符串});

注意事项：
默认不带 Cookie：若需发送 Cookie，需添加配置项 credentials: 'include'。
不会自动报错：即使响应状态码为 404 或 500，也不会触发 .catch()，需手动检查 response.ok 或 response.status。
返回 Promise：支持链式调用或 async/await 语法。示例代码如下：

async function fetchData() { try { const response = await fetch('

https://api.example.com/data'

); const data = await response.json(); console.log(data); } catch (error) { console.error('出错了:', error); }}fetch 与 AJAX 的区余拿别

语法风格：
fetch：基于 Promise，代码更简洁，支持 async/await。
AJAX：传统方式依赖回调函数（如 XMLHttpRequest）或 jQuery 的 $.ajax，易产生嵌套。
默认行为：
fetch：默认不发送 Cookie，需显式配置 credentials: 'include'。
AJAX：可默认携带 Cookie（取决于 withCredentials 设置）。
兼容性：
fetch：不支持 IE 浏览器，现代浏览器（Chrome、Firefox、Edge 等）均支持。
AJAX：兼容所有主流浏览器，包括 IE。
功能控制：
中断请求：
fetch：需使用 AbortController API 中断请求。示例代码如下：

const controller = new AbortController();fetch('

https://api.example.com/data'

, { signal: controller.signal }) .catch(error => { if (error.name === 'AbortError') { console.log('请求已中断'); } });controller.abort(); // 中断请求- AJAX：通过 `xhr.abort()` 直接中断。

进度监听：
fetch：对上唯毁脊传/下载进度支持有限，需结合 ReadableStream 封装。
AJAX：通过 xhr.upload.onprogress 或 xhr.onprogress 监听进度。

实际开发中的选择建议

推荐使用 fetch 的场景：
开发现代 Web 应用（如 React/Vue 的 SPA）。
目标用户使用主指渗流浏览器（无需兼容 IE）。
偏好简洁的 Promise 或 async/await 语法。
推荐使用 AJAX 的场景：
需兼容 IE11 或老版本安卓浏览器。
需要精细控制请求（如中断、进度监听）。
折中方案：
结合第三方库（如 axios），它底层可基于 fetch 或 XMLHttpRequest，提供统一接口和增强功能（如自动 JSON 转换、请求/响应拦截等）。

您可能感兴趣问答

Collapsible

热门标签

热点问答