当前位置：首页 > 文章列表 > 文章 > 前端 > javascript如何发送网络请求_如何使用原生的Fetch API？

javascript如何发送网络请求_如何使用原生的Fetch API？

2026-05-05 15:05:39 0浏览收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《javascript如何发送网络请求_如何使用原生的Fetch API？》，涉及到，有需要的可以收藏一下

最现代、推荐的JavaScript网络请求方式是Fetch API。它基于Promise、语法简洁、取代XMLHttpRequest，支持GET/POST等方法，需手动检查response.ok处理HTTP错误，响应体用.json()等方法读取，支持credentials、cache、signal等配置项。

JavaScript 发送网络请求，最现代、推荐的方式是使用原生的 Fetch API。它基于 Promise，语法简洁，取代了老旧的 XMLHttpRequest，且被所有主流浏览器（包括 Edge 18+）良好支持。

基本用法：GET 请求获取数据

最常见的是发起一个 GET 请求，比如从 JSON 接口拉取用户列表：

调用 fetch(url) 返回一个 Promise，解析响应需链式调用 .then()
注意：fetch 默认只拒绝网络错误（如断网），404、500 等 HTTP 错误状态不会触发 catch，需手动检查 response.ok
响应体需用 response.json()、response.text() 等方法读取，它们也返回 Promise

示例：

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

发送 POST 请求并提交 JSON 数据

向服务器提交数据时，通常用 POST，并设置请求头和请求体：

headers 中指定 'Content-Type': 'application/json'
body 需是字符串，用 JSON.stringify() 转换对象
可传入配置对象作为 fetch 的第二个参数：fetch(url, options)

示例：

const userData = { name: '张三', email: 'zhang@example.com' };

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(res => res.json())
.then(data => console.log('创建成功:', data));