首页 › JavaScript › AJAX 教程

Fetch API 进阶

AJAX 教程 · 第 5 章 · 6 次浏览

fetch 是浏览器新一代请求 API，返回 Promise，语法更简洁，支持 async/await。

基本用法

fetch(url, options)，options 里 method、headers、body。默认 GET。

async/await 写法

await fetch → await res.json()，异常用 try/catch 捕获。

与 XHR 对比

  • fetch 用 Promise，代码可读性好
  • fetch 默认不带 cookie（要 credentials: "include"）
  • fetch 不会像 XHR 那样区分 4xx 为失败，需要自己判断 res.ok

代码示例

// 基础 GET
async function getUsers() {
    try {
        const res = await fetch("/api/users");
        if (!res.ok) throw new Error("HTTP " + res.status);
        const users = await res.json();
        console.log(users);
    } catch (err) {
        console.error("请求失败:", err.message);
    }
}

// POST JSON
async function createUser() {
    const res = await fetch("/api/users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: "李四", age: 30 })
    });
    const data = await res.json();
    console.log(data);
}

getUsers();
📚 JavaScript 语法速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
写法 / 语法作用
let x = 1;声明变量（可重新赋值）
const y = 2;声明常量（不可重新赋值）
var 已过时旧式变量声明，建议用 let/const
if (条件) { } else { }条件判断
for (let i = 0; i < n; i++) { }循环
while (条件) { }条件循环
function fn(a, b) { return a + b; }函数声明
const fn = (a) => a + 1;箭头函数
array.push(x) / pop()数组尾部添加 / 删除
array.map(fn) / filter(fn)数组映射 / 过滤
obj.key / obj["key"]访问对象属性
JSON.stringify(obj)对象转 JSON 字符串
JSON.parse(str)JSON 字符串转对象
document.getElementById("id")按 id 取元素
document.querySelector("选择器")按选择器取第一个元素
element.textContent读写元素文本
element.innerHTML读写元素 HTML（慎用，防 XSS）
element.addEventListener("click", fn)绑定事件
console.log(x)控制台输出（调试）
setTimeout(fn, 1000)延迟执行（毫秒）
window.location.href当前页面地址（可赋值跳转）
localStorage.setItem("k", v)本地存储写入
localStorage.getItem("k")本地存储读取
new Promise((resolve, reject) => {})Promise 异步处理
async / await异步函数语法糖
📖 延伸阅读