当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript发送HTTP请求：fetch与AJAX教程

JavaScript发送HTTP请求：fetch与AJAX教程

2025-12-26 23:42:51 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript发送HTTP请求教程：fetch与AJAX详解》，聊聊，我们一起来看看吧！

fetch 是基于 Promise 的现代 API，语法简洁，推荐用于新项目；2. AJAX（XMLHttpRequest）兼容性好但代码冗长，适合旧浏览器；3. fetch 需手动检查 response.ok 并解析 JSON，不因 HTTP 错误状态自动 reject；4. 两者均可实现 GET 和 POST 请求，但 fetch 支持 async/await 更易读；5. 中断请求方面，XMLHttpRequest 使用 abort()，fetch 需借助 AbortController；6. 实际开发中建议新项目用 fetch，兼容性需求可选 axios 或封装 XMLHttpRequest；7. 注意处理网络异常与业务错误区分，及安全凭据设置。

JavaScript如何发送HTTP请求_JavaScriptfetch与AJAX请求方法使用教程

JavaScript发送HTTP请求是前端与后端交互的核心能力。现代开发中，常用的方法有 fetch 和传统的 AJAX（通常通过 XMLHttpRequest）。下面详细介绍它们的使用方式、区别和实际应用场景。

使用 fetch 发送 HTTP 请求

fetch 是现代浏览器提供的原生 API，基于 Promise，语法简洁，支持 async/await，推荐在新项目中使用。

基本用法：

fetch 默认发送 GET 请求，返回一个 Promise
需要手动调用 .json() 解析响应体

示例：GET 请求获取数据

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('错误:', error);
  });

示例：POST 请求提交数据

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: '张三',
    age: 25
  })
})
  .then(response => response.json())
  .then(data => {
    console.log('提交成功:', data);
  })
  .catch(error => {
    console.error('错误:', error);
  });

注意：fetch 不会因 HTTP 状态码报错（如 404 或 500），需手动检查 response.ok。

使用 AJAX（XMLHttpRequest）发送请求

XMLHttpRequest 是较老的 API，兼容性好，适合需要支持旧浏览器的场景。

基本流程：

创建 XMLHttpRequest 实例
配置请求方式、URL 和回调函数
发送请求并处理响应

示例：GET 请求

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

示例：POST 请求

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/users', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 201) {
    const data = JSON.parse(xhr.responseText);
    console.log('创建成功:', data);
  }
};
xhr.send(JSON.stringify({
  name: '李四',
  age: 30
}));

缺点：代码冗长，嵌套回调容易形成“回调地狱”，不如 fetch 直观。

fetch 与 AJAX 的对比

fetch 基于 Promise，支持 async/await；XMLHttpRequest 是事件驱动
fetch 语法更简洁，但默认不带 cookie，需设置 credentials: 'include'
XMLHttpRequest 可以中断请求（abort），fetch 使用 AbortController 实现
fetch 在老版本 IE 中不支持，需 polyfill

fetch 中断请求示例：

const controller = new AbortController();

fetch('/api/data', { signal: controller.signal })
  .then(response => response.json())
  .then(data => console.log(data));

// 需要时中断请求
controller.abort();