登录
首页 >  文章 >  java教程

JavaScriptfetch发送GET请求教程

时间：2026-05-10 20:22:50 180浏览 收藏

本文深入浅出地讲解了如何使用 JavaScript 的 fetch API 发起 GET 请求获取数据，涵盖从基础用法到实战技巧的完整链路：默认即为 GET 方法，核心在于三步——调用 fetch、检查响应状态、调用 response.json() 解析 JSON；强调避免手动拼接 URL 参数而应使用 URLSearchParams 自动处理编码，介绍在请求头中添加认证信息等进阶配置，并重点推荐更简洁健壮的 async/await 写法配合 try/catch 统一捕获网络错误、HTTP 状态异常及 JSON 解析失败，让异步数据获取既可靠又易读。

如何在 JavaScript 中利用 fetch() 发送基础的 GET 请求获取远程 API 数据

直接用 fetch() 发起 GET 请求很简单，核心是调用函数、处理响应、解析 JSON，三步到位。

基础语法：发起请求并读取 JSON 数据

fetch() 默认就是 GET 请求，不需要额外配置方法。关键是要用 .then() 链式处理响应体，并显式调用 response.json() 才能得到真正的数据对象：

  • 调用 fetch(url) 返回一个 Promise，代表网络响应（不是数据本身）
  • 响应对象有 .json() 方法，它也返回 Promise，用于解析响应体为 JavaScript 对象
  • 记得用 .catch() 捕获网络错误或解析失败（比如服务器返回非 JSON 内容）

示例：

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.title)) // 输出 "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
  .catch(err => console.error('请求失败:', err));

带查询参数的 GET 请求

URL 中的查询参数不能直接拼字符串（易出编码问题），推荐用 URLSearchParams 构造：

  • 创建参数对象，传入 URLSearchParams
  • 将结果附加到 URL 后面，自动处理编码和 ?/& 拼接

示例：

const params = new URLSearchParams({ userId: 1, _limit: 5 });
fetch(`https://jsonplaceholder.typicode.com/posts?${params}`)
  .then(r => r.json())
  .then(posts => console.log(posts.length)); // 输出 5

设置请求头（如认证或内容类型）

虽然 GET 请求通常不需要请求体，但有时需添加 headers（比如 Bearer Token）：

  • 通过 fetch(url, options) 的第二个参数传入配置对象
  • headers 是一个普通对象，键名大小写不敏感，值必须是字符串
  • 常见场景：添加 Authorization 或 Accept 头

示例：

fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer abc123',
    'Accept': 'application/json'
  }
})
.then(r => r.json())
.catch(e => console.error(e));

使用 async/await 写法更清晰

相比链式 .then()，async/await 让异步逻辑更接近同步阅读习惯，错误处理也更直观：

  • 函数需声明为 async
  • 用 await fetch(...) 等待响应，再 await response.json()
  • 用 try/catch 统一捕获网络错误、状态异常、JSON 解析错误

示例：

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

getPost(1).then(post => console.log(post.title));

今天关于《JavaScriptfetch发送GET请求教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>