如何用javascript发起HTTP请求_fetch API怎么用？-js教程-PHP中文网

如何用javascript发起HTTP请求_fetch API怎么用？

夜晨

发布： 2025-12-15 11:33:02

原创

744人浏览过

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

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

用 JavaScript 发起 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纹身生成

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

查看详情

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：

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

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 不复杂但容易忽略细节，配好错误处理和状态判断，日常开发足够用了。

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