JavaScript 中怎么通过 Fetch API 发送网络 HTTP 请求-js教程-PHP中文网

fetch()发送http请求需处理promise，get默认、post需配置method/headers/body，须检查response.ok，网络错误会reject，http错误需手动判断。

javascript 中怎么通过 fetch api 发送网络 http 请求

JavaScript 中用 fetch() 发送 HTTP 请求非常直接，核心是调用函数并处理返回的 Promise。

基本语法和 GET 请求

fetch() 默认发起 GET 请求，只需传入 URL 字符串：

它返回一个 Promise，解析后得到 Response 对象
需链式调用 .json()、.text() 等方法读取响应体（这些方法也返回 Promise）
必须显式检查 response.ok（状态码在 200–299 范围内为 true），否则 4xx/5xx 不会自动 reject

示例：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

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

发送 POST 请求并提交 JSON 数据

POST 需配置 options 对象，指定方法、请求头和请求体：

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(response => response.json())
.then(data => console.log(data));

设置请求头、认证和超时控制

常见自定义需求可通过 options 实现：

带 Bearer Token 认证：headers: { 'Authorization': 'Bearer xxx' }
发送 Cookie（同源默认携带）：credentials: 'include'（跨域时需服务端支持）
手动控制超时：原生 fetch 不支持 timeout 选项，需用 AbortController

超时示例：

const controller = new AbortController();
setTimeout(() => controller.abort(), 5000); // 5 秒超时

fetch('/api/data', {
  signal: controller.signal
})
.catch(err => {
  if (err.name === 'AbortError') console.log('请求已超时');
});

错误处理的关键点

注意两个层级的错误：

网络失败（如离线、DNS 错误）→ fetch() 返回的 Promise 被 reject
HTTP 错误（如 404、500）→ Promise 正常 resolve，但 response.ok 为 false

推荐写法：先 catch 网络异常，再手动校验状态码：

fetch(url)
  .catch(err => {
    console.error('网络异常:', err);
    throw err;
  })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    return response.json();
  });