fetch 网络请求

fetch 是浏览器内置的请求接口，不用装任何库。基本用法：传入 URL 返回 Promise，拿到响应后调用 res.json() 把响应体解析成 JS 对象（这也是个异步操作，要再 await 一次）。

一个必须知道的大坑：fetch 只有网络层失败（断网、DNS 解析失败）才会 reject，404、500 这类 HTTP 错误照样走 then。所以要手动检查 res.ok（状态码 200~299）或 res.status，不 OK 就主动 throw，让错误进入 catch。

POST 请求通过第二个参数配置：method 设为 POST，headers 声明内容类型，body 传 JSON.stringify(数据)。实际项目常用 axios 等库封装拦截器，但 fetch 的这些概念是共通的。

本节要点fetch 两步走：先 await fetch 拿响应，再 await res.json() 解析；404/500 不会自动抛错，必须检查 res.ok；POST 用第二参数配置 method/headers/body。

JavaScript

// GET：获取数据
async function loadTodo() {
  try {
    const res = await fetch(
      'https://jsonplaceholder.typicode.com/todos/1'
    );
    if (!res.ok) {                    // 404/500 不会自动抛错！
      throw new Error('HTTP 错误：' + res.status);
    }
    const data = await res.json();    // 解析响应体为对象
    console.log('标题：' + data.title);
    console.log('完成了吗：' + data.completed);
  } catch (err) {
    // 断网、DNS 失败、手动 throw 的错误都会到这里
    console.log('请求失败：' + err.message);
  }
}
loadTodo();

// POST：提交数据
async function saveTodo() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: '学习 fetch', completed: false }),
  });
  console.log('服务器返回：', await res.json());
}
// saveTodo();

🔗 相关词条Promise await fetch 浏览器 JS 异步

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读