如何用j*ascript发起HTTP请求_fetch API怎么用？_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何用j*ascript发起HTTP请求_fetch API怎么用？

2025-12-15

浏览次数：次

返回列表

最推荐用 fetch API 发起 HTTP 请求，它原生支持、基于 Promise、语法简洁；需手动检查 response.ok 处理 404/500 等状态码，POST 要设 headers 和 JSON.stringify body，超时需 AbortController 实现。

如何用javascript发起http请求_fetch api怎么用？

用 J*aScript 发起 HTTP 请求，现在最推荐的方式就是 fetch API。它原生支持、语法简洁、基于 Promise，比老式的 XMLHttpRequest 更直观，也更容易配合 async/await 使用。

fetch 基本用法：GET 请求

最简单的场景是发一个 GET 请求获取数据：

调用 fetch(url) 返回一个 Promise，成功时解析出 Response 对象
Response 对象需要再调用 .json()、.text() 或 .blob() 等方法读取响应体
注意：fetch 不会因 HTTP 状态码（如 404、500）自动 reject，需手动检查 response.ok 或 response.status

示例：

Blackink AI纹身生成

创建类似纹身的设计，生成独特纹身

80 查看详情

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

发送 POST 请求并传 JSON 数据

提交表单或调用接口常需 POST。关键点是设置 headers 和 body：

立即学习“J*a免费学习笔记（深入）”；

Content-Type: application/json 告诉后端你发的是 JSON
用 JSON.stringify() 把对象转成字符串再传入 body
method 字段必须显式写为 'POST'

示例：

async function createPost() {
  const postData = { title: '我的标题', body: '这是内容', userId: 1 };
  
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(postData)
  });

  return response.json();
}

处理请求头、凭证和超时

实际项目中常需额外配置：

credentials: 'include' —— 携带 Cookie（跨域时后端也要允许）
headers 可加 Authorization、X-Requested-With 等自定义字段
fetch 本身不支持 timeout，但可用 AbortController 实现中断

带超时的示例：

async function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(id);
    return response;
  } catch (err) {
    clearTimeout(id);
    if (err.name === 'AbortError') {
      throw new Error('请求超时');
    }
    throw err;
  }
}

常见坑和注意事项

刚上手 fetch 容易忽略这些细节：

fetch 返回的 Promise 只在网络错误（如断网、DNS 失败）时 reject；4xx/5xx 状态码仍算 resolve
没写 await response.json() 就直接打印 response，看到的是 Response 对象，不是数据
POST 时漏了 headers 或没 stringify body，后端可能收不到数据或报错
跨域请求默认不带 Cookie，要加 credentials: 'include' 并确保后端响应头有 Access-Control-Allow-Credentials: true

基本上就这些。fetch 不复杂但容易忽略细节，配好错误处理和状态判断，日常开发足够用了。

以上就是如何用j*ascript发起HTTP请求_fetch API怎么用？的详细内容，更多请关注其它相关文章！

# 有哪些 # 网站列表页的优化 # 网站建设是什么职业的 # 内江品牌网站建设 # 网站关键词优化概念 # 推广驾校的网站有哪些 # 优化精英seo # 廊坊市整合营销推广 # 品牌网站建设代运营 # 广德网站优化哪家专业 # 虚拟卡如何做营销推广呢 # 使用它 # 中文网 # 用了 # 相关文章 # 也要 # javascript # 这是 # 的是 # 如何用 # r # 状态码 # 跨域 # dns # ai # 后端 # access # app # cookie # json # js # java