javascript如何发送HTTP请求_fetch API的基本用法是什么？-js教程-PHP中文网

javascript如何发送HTTP请求_fetch API的基本用法是什么？

夜晨

发布： 2025-12-18 23:08:02

原创

542人浏览过

fetch API 是 JavaScript 发送 HTTP 请求最常用、最现代的方式，基于 Promise、语法简洁、原生支持；GET 请求直接传 URL，POST 需设置 method、headers 和 JSON.stringify() 处理 body；需手动检查 response.ok 处理 HTTP 错误，超时需自行封装，async/await 写法更清晰。

javascript如何发送http请求_fetch api的基本用法是什么？

JavaScript 发送 HTTP 请求最常用、最现代的方式就是 fetch API。它基于 Promise，语法简洁，原生支持，无需额外库（如 jQuery 的 $.ajax），是目前推荐的标准方案。

fetch 的基本语法和 GET 请求

最简单的用法是发起一个 GET 请求：

fetch(url) 接收一个 URL 字符串，返回一个 Promise
成功时，Promise 解析为一个 Response 对象（不是响应体数据本身）
需要用 .json()、.text()、.blob() 等方法进一步读取响应体

示例：

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

193

查看详情

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

登录后复制

发送 POST 请求并携带 JSON 数据

POST 请求需手动设置请求头和请求体：

立即学习“Java免费学习笔记（深入）”；

method: 'POST' 指定方法
headers 中设 'Content-Type': 'application/json'
body 要是字符串，所以用 JSON.stringify() 序列化对象

示例：

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: '我的新文章',
    body: '这是内容',
    userId: 1
  })
})
.then(res => res.json())
.then(data => console.log(data));

登录后复制

处理错误和网络异常

注意：fetch 只在**网络错误**（如断网、DNS 失败）时 reject；HTTP 错误状态码（如 404、500）仍会 resolve，需手动检查 response.ok 或 response.status：

response.ok === true 表示状态码在 200–299 范围内
建议统一在第一个 then 中做状态校验并主动 throw 错误，便于后续 catch
超时需自行封装（fetch 本身不支持 timeout 选项）

使用 async/await 写法更清晰

配合 async/await 可让异步逻辑像同步一样阅读：

async function fetchPost(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.message);
  }
}

登录后复制

调用：fetchPost(1).then(post => console.log(post))

基本上就这些。fetch 简洁够用，覆盖大多数场景；复杂需求（如上传进度、自动重试、拦截器）可考虑封装或用 axios 等库补充。

以上就是javascript如何发送HTTP请求_fetch API的基本用法是什么？的详细内容，更多请关注php中文网其它相关文章！