Ajax和Fetch都是JavaScript中用于从客户端向服务器发送请求以获取数据的技术，但它们之间存在一些显著的区别。以下是对这两种技术的详细比较：
一、技术基础与实现方式
-
Ajax：
- 基础：Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。
- 实现方式：Ajax通常使用XMLHttpRequest对象来进行请求和响应的处理。这种方式的语法相对较复杂，需要编写更多的代码来处理回调函数和状态。
-
Fetch：
- 基础：Fetch是现代JavaScript中的一个API，提供了对Request和Response对象的通用定义，用于处理网络请求。
- 实现方式：Fetch使用Promise对象来处理异步操作，可以链式调用，使代码更易于理解和维护。Fetch的API风格更加简洁，且功能强大。
二、异步处理与代码风格
-
Ajax：
- 异步处理：Ajax使用回调函数来处理异步操作，这可能导致回调地狱（callback hell）的问题，特别是在复杂的请求链中。
- 代码风格：Ajax的代码风格相对传统，需要手动处理请求和响应的多个方面。
-
Fetch：
- 异步处理：Fetch使用Promise对象来处理异步操作，这使得处理异步请求更为灵活和简洁。可以使用async/await来编写清晰的异步代码，避免了回调地狱的问题。
- 代码风格：Fetch的代码风格更加现代和简洁，易于理解和维护。
三、跨域请求与CORS
-
Ajax：
- 跨域请求：Ajax请求可以跨越不同的域名，但需要适当处理CORS（跨源资源共享）问题。Ajax可以通过JSONP、代理服务器等技术来进行跨域请求。
-
Fetch：
- 跨域请求：Fetch对跨域请求有更严格的限制，因为它遵循了同源策略。如果需要进行跨域请求，需要在服务器端设置适当的CORS头以允许跨域请求。Fetch请求可以自动处理CORS问题，但在某些情况下可能需要额外的配置。
四、其他特点
-
Ajax：
- 灵活性：Ajax可以自定义请求头、请求体、响应格式等，提供了较高的灵活性。
- 兼容性：Ajax在老版本的浏览器中可能存在兼容性问题，但随着现代浏览器的普及，这个问题已经得到了很大的改善。
-
Fetch：
- 自带超时处理：Fetch可以在请求超时后自动中断请求，避免了长时间等待。
- 响应处理：Fetch提供了丰富的方法来处理响应数据，如.json()、.text()、.blob()等，使得处理响应数据更加方便。
用法
fetch 是 JavaScript 中的一个现代且强大的网络请求 API，它提供了一种简单、逻辑清晰的方式来跨网络异步获取资源。fetch 返回一个 Promise，这使得它很容易与 JavaScript 的异步/等待（async/await）语法一起使用。以下是一些基本用法示例：
基本 GET 请求
fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json(); // 解析 JSON 数据}).then(data => {console.log(data); // 处理数据}).catch(error => {console.error('There was a problem with your fetch operation:', error);});
使用 async/await
async function fetchData() {try {const response = await fetch('https://api.example.com/data');if (!response.ok) {throw new Error('Network response was not ok');}const data = await response.json(); // 等待 JSON 解析console.log(data);} catch (error) {console.error('There was a problem with your fetch operation:', error);}
}fetchData();
POST 请求
fetch('https://api.example.com/data', {method: 'POST', // 或者 'PUT'headers: {'Content-Type': 'application/json',},body: JSON.stringify({key: 'value',}),
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));
自定义请求头
fetch('https://api.example.com/data', {method: 'GET',headers: {'Authorization': 'Bearer YOUR_TOKEN_HERE','Content-Type': 'application/json',},
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));
注意事项
fetch不会自动处理 JSON 数据，你需要使用.json()方法来解析 JSON 响应体。fetch遵循 CORS（跨源资源共享）策略，如果请求跨域，则必须服务器支持 CORS。fetch抛出的错误不会自动被.catch()捕获，只有请求本身成功（即 HTTP 状态码在 200-299 范围内），但解析响应体（如.json()）时出错，才会被.catch()捕获。因此，通常检查response.ok属性是一个好习惯。fetch的body属性可以是多种类型，如Blob、BufferSource、FormData、URLSearchParams或USVString对象。对于 JSON 数据，需要手动JSON.stringify()转换。
fetch API 提供了灵活的网络请求功能，是现代前端开发中不可或缺的一部分。
html中完整使用fetch的示例
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fetch Example</title>
</head>
<body> <h1>Fetch API Example</h1> <!-- 你可以在这里添加更多的HTML内容 --> <script> // 使用async/await语法进行fetch请求 async function fetchData() { try { // 发起fetch请求 const response = await fetch('https://api.example.com/data'); // 检查响应是否成功 if (!response.ok) { throw new Error('Network response was not ok: ' + response.statusText); } // 解析JSON响应体 const data = await response.json(); // 处理数据，例如：在控制台中打印 console.log(data); // 你也可以在这里将数据显示在HTML页面上 // 例如：document.getElementById('someElementId').innerText = JSON.stringify(data); } catch (error) { // 捕获并处理任何错误 console.error('There was a problem with your fetch operation:', error); } } // 调用函数 fetchData();
</script> </body>
</html>
五、总结
Ajax和Fetch各有优缺点，适用于不同的场景。Ajax作为一种传统的技术，在旧的应用和环境中仍然广泛使用，并且具有较高的灵活性。而Fetch作为现代JavaScript中的API，提供了更简洁、功能更强大的方式来处理网络请求，特别适合使用在现代JavaScript应用中。开发者可以根据实际需求和场景选择合适的技术。
