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() 等方法进一步读取响应体

示例：

芝士饼

芝士饼是一个一站式AI原生应用开发平台，简单几步即可完成应用的创建与发布。

查看详情

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中文网其它相关文章！