当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptfetchAPI简介与使用方法

JavaScriptfetchAPI简介与使用方法

2026-02-04 08:28:35 0浏览收藏

golang学习网今天将给大家带来《JavaScript fetch API是什么及如何使用？》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

Fetch API 是浏览器内置的现代网络请求接口，基于 Promise，支持 async/await；GET/POST 请求需手动处理 HTTP 错误和 JSON 解析，注意 credentials、超时及进度等限制。

javascript的fetch api是什么_如何发起网络请求？

Fetch API 是浏览器内置的、用于发起网络请求的现代 JavaScript 接口，它比传统的 XMLHttpRequest 更简洁、更强大，基于 Promise，天然支持 async/await。

基本用法：发起一个 GET 请求

最简单的 fetch 调用只需要传入一个 URL 字符串：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('请求失败:', error));

fetch 返回一个 Promise，代表响应的未来值
注意：fetch 只在发生网络错误（如断网）时 reject；HTTP 状态码如 404、500 不会触发 catch，需手动检查 response.ok 或 response.status
response.json() 也返回 Promise，要等它解析完才能拿到真正的数据

发送 POST 请求并携带 JSON 数据

需要配置 options 对象，指定 method、headers 和 body：

const data = { username: 'alice', password: '123' };

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(res => {
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
})
.then(json => console.log(json))
.catch(err => console.error(err));

body 必须是字符串、Blob、FormData 等可序列化类型；JSON 需先用 JSON.stringify()
手动检查 res.ok（等价于 status 在 200–299 区间），避免把服务端错误当成功处理
设置 Content-Type 头让后端知道你发的是 JSON

使用 async/await 让代码更清晰

配合 async 函数，可以写出接近同步风格的请求逻辑：

async function getUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(res.statusText);
    const user = await res.json();
    return user;
  } catch (err) {
    console.error('获取用户失败:', err);
    throw err;
  }
}

// 调用
getUser(123).then(u => console.log(u));