在写网页的时候，经常要从服务器拿数据，比如加载一篇文章、提交一个表单、或者实时查看天气。以前大家常用 XMLHttpRequest，现在有了更简洁的方式——fetch。它原生支持 Promise，写起来更顺手，也更容易理解。
fetch 是什么
fetch 是浏览器提供的一个全局方法，用来发起网络请求。它返回一个 Promise，可以配合 async/await 使用，让异步代码看起来更像同步操作。不像老式写法那样嵌套回调，逻辑清晰不少。
最简单的 GET 请求
比如你想从某个接口获取用户信息，可以直接用 fetch 调用：
fetch('/api/user')
.then(response => response.json())
.then(data => console.log(data));这段代码会向 /api/user 发起 GET 请求，拿到响应后转成 JSON，最后打印出来。整个过程非阻塞，不会卡住页面。
用 async/await 写更清爽
如果你习惯用 async 函数，可以这样写：
async function getUser() {
const response = await fetch('/api/user');
const data = await response.json();
console.log(data);
}看起来就像一步步执行，调试时也方便跟踪每一步的结果。
发送 POST 请求传数据
提交登录表单时通常用 POST。fetch 也能轻松处理：
async function login() {
const response = await fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: 'john',
password: '123456'
})
});
if (response.ok) {
const result = await response.json();
console.log('登录成功', result);
} else {
console.log('登录失败');
}
}这里设置了请求方法、头信息和请求体。注意 Content-Type 要设对，不然后端可能解析不了。
别忘了处理网络异常
网络不是 always 可靠的，用户可能断网，服务器也可能抽风。所以最好加上 try-catch：
async function fetchData() {
try {
const response = await fetch('/api/data');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('请求出错：', error);
}
}这样即使网络断了或者接口挂了，也不会让整个页面崩溃，还能给用户提示。
实际场景：加载新闻列表
假设你做个个人博客，首页要显示最新几条文章。可以用 fetch 从 /api/posts 拿数据：
async function loadPosts() {
const container = document.getElementById('posts');
try {
const response = await fetch('/api/posts');
const posts = await response.json();
posts.forEach(post => {
const div = document.createElement('div');
div.innerHTML = `<h3>${post.title}</h3><p>${post.summary}</p>`;
container.appendChild(div);
});
} catch (err) {
container.innerHTML = '<p>加载失败，请稍后重试</p>';
}
}
// 页面加载完自动执行
loadPosts();这样一来，打开页面就能动态加载内容，不用刷新也能更新信息。
小细节要注意
fetch 默认不带 cookie，如果接口依赖登录状态，记得加 credentials 选项：
fetch('/api/profile', {
credentials: 'include'
});另外，跨域问题还是得后端配合设置 CORS，光前端改没用。
现在主流浏览器都支持 fetch，IE 不行，但如果你不维护老项目，基本可以放心用。它比以前的方案更现代、更简洁，写前端绕不开这一块。