JS 中怎么用 fetch API 发起一个基础的 GET 请求-js教程-PHP中文网

fetch()默认发起get请求，需手动检查response.ok并调用response.json()解析数据；推荐使用async/await写法，注意4xx/5xx不会自动reject，可封装为httpget函数统一处理。

js 中怎么用 fetch api 发起一个基础的 get 请求

直接用 fetch() 调用 URL 即可发起 GET 请求，它默认就是 GET 方法，不需要额外配置。

基础写法（带错误处理）

最简可用的代码包含三步：调用 fetch、检查响应状态、解析 JSON（如果后端返回 JSON）：

fetch(url) 返回一个 Promise，代表网络请求本身
response.ok 判断 HTTP 状态码是否在 200–299 范围内（推荐用这个，比手动判断 status 更稳妥）
response.json() 返回另一个 Promise，用于解析响应体为 JavaScript 对象

示例：

Browser Js

轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。

下载

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

用 async/await 写更清晰

现代写法更推荐 async/await，逻辑更接近同步代码，也更容易加 try/catch：

async function getPost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error('获取失败:', err);
  }
}
getPost();

注意几个常见细节

fetch 不会因 4xx 或 5xx 状态码自动 reject，必须手动检查 response.ok 或 response.status
如果接口返回纯文本（比如 HTML 或字符串），用 response.text() 替代 response.json()
需要带请求头（如认证 token）时，传入第二个参数对象：fetch(url, { headers: { 'Authorization': 'Bearer xxx' } })
fetch 默认不带 Cookie，如需发送 cookie，加上 credentials: 'include'

简单封装一个复用函数

可以封装一个轻量工具函数，统一处理成功与失败路径：

async function httpGet(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
  return res.json();
}

// 使用
httpGet('https://jsonplaceholder.typicode.com/todos/1')
  .then(todo => console.log(todo.title))
  .catch(err => console.error(err));