HTML5怎么发送网络请求？，前端ajax请求数据

在HTML5环境中发送网络请求，最标准且高效的方式是使用原生的Fetch API，它基于Promise，语法简洁且支持现代异步编程模式，完全取代了老旧的XMLHttpRequest。

现代Web开发早已告别了通过刷新整个页面来更新局部内容的时代,无论是构建单页应用（SPA），还是开发复杂的后台管理系统，前端与后端的数据交互都是核心环节，过去，开发者不得不依赖jQuery的$.ajax或笨重的XMLHttpRequest对象，代码冗长且难以维护，浏览器原生提供的Fetch API成为了事实上的标准，它不仅轻量级，而且与ES6的异步特性完美融合，让代码逻辑更加清晰，对于初学者而言，掌握Fetch不仅是学会一个API，更是理解现代Web数据流的关键一步。

加载中

20分钟学会网络请求的一切 前端新手遇到问题最多的技能 AJAX Axios Fetch API

吴悠讲编程

6.8万2392169

原视频地址

为什么Fetch API优于传统XHR

在深入代码之前,有必要厘清为什么业内专家普遍推荐在新项目中摒弃XMLHttpRequest，这种转变并非仅仅出于潮流，而是基于实际开发痛点的解决。

异步编程的简洁性对比

XMLHttpRequest采用回调函数机制,当请求嵌套较多时，容易陷入“回调地狱”，代码可读性极差，相比之下，Fetch返回一个Promise对象，可以链式调用.then()和.catch()，或者配合async/await语法，使异步代码看起来像同步代码一样线性流畅，这种结构上的优势，使得调试和维护变得轻而易举。

基于流的响应处理

传统XHR在处理大文件下载或上传时,往往需要等待整个响应体加载完毕才能处理，内存占用高且体验卡顿，Fetch API提供了基于流的响应机制，这意味着你可以逐块读取响应数据，这对于处理视频流、大文件传输或实时数据推送至关重要，这种细粒度的控制能力，是旧式API无法比拟的。

拦截器与中间件的支持

现代前端框架如React、Vue等，通常依赖拦截器来处理全局的Token注入、错误统一捕获或日志记录，Fetch API的设计天然支持这种模式，通过封装一个统一的请求函数，可以轻松实现全局配置，而XHR由于API设计的局限性，实现类似的拦截功能往往需要复杂的猴子补丁或库的支持。

HTML5发送网络请求实操指南

理论终归要落地,下面我们将通过具体的代码示例，展示如何在不同场景下使用Fetch API，请确保你的目标浏览器支持ES6标准，目前主流浏览器均已完美支持。

基础GET请求实现

获取数据是最常见的场景,以下是一个标准的GET请求示例，展示了如何从服务器获取JSON数据并解析。

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应异常');
    }
    return response.json();
  })
  .then(data => {
    console.log('获取成功:', data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

在这个示例中,我们首先检查response.ok属性，确保HTTP状态码在200-299之间，这是处理网络错误的关键步骤，因为Fetch默认不会在HTTP错误时抛出异常，只有网络故障才会触发.catch。

POST请求与JSON数据提交

当需要向服务器提交数据时,必须正确设置请求头和请求体，许多开发者容易忽略Content-Type头，导致后端无法正确解析JSON数据。

fetch('/api/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json; charset=UTF-8',
    'Authorization': 'Bearer your-token-here'
  },
  body: JSON.stringify({
    name: '张三',
    age: 25,
    role: 'developer'
  })
})
.then(response => response.json())
.then(data => console.log('提交成功:', data))
.catch(error => console.error('提交失败:', error));

注意,body部分必须使用JSON.stringify()将对象转换为字符串，我们在头部添加了自定义的认证Token，这是现代Web应用安全性的基本要求。

使用async/await简化逻辑

为了让代码更易读,推荐使用async/await语法，它将异步操作包裹在同步风格的代码块中，消除了回调函数的嵌套。

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error('网络响应异常');
    }
    const data = await response.json();
    console.log('数据加载完成:', data);
    return data;
  } catch (error) {
    console.error('发生错误:', error);
  }
}

这种写法在处理多个依赖关系的请求时优势明显,逻辑清晰，错误处理集中，是生产环境中的首选方案。

HTML5发送网络请求常见陷阱与优化

尽管Fetch API强大，但如果不加注意，很容易陷入一些常见的陷阱，了解这些陷阱并加以规避，是编写健壮代码的前提。

Cookie与跨域资源共享(CORS)

默认情况下,Fetch请求不会携带Cookie或HTTP认证信息，如果后端依赖Session进行身份验证，必须显式设置credentials: 'include'或credentials: 'same-origin'。

fetch('/api/protected', {
  credentials: 'include'
});

跨域请求是前端开发的常态,如果后端未正确配置CORS头，浏览器会拦截请求，开发者需确保后端返回Access-Control-Allow-Origin等必要头信息，否则前端代码写得再完美也无法获取数据。

超时控制与取消请求

Fetch API本身没有内置的超时机制，如果服务器响应缓慢，页面可能会长时间处于加载状态，为解决此问题，可以使用AbortController来取消未完成的请求。

const controller = new AbortController();
const signal = controller.signal;
// 设置5秒超时
const timeoutId = setTimeout(() => controller.abort(), 5000);
fetch('/api/slow-endpoint', { signal })
  .then(response => response.json())
  .then(data => {
    clearTimeout(timeoutId);
    console.log(data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求已取消或超时');
    } else {
      console.error('其他错误:', error);
    }
  });

这种模式不仅解决了超时问题,还允许用户在页面切换或用户取消操作时，主动终止网络请求，节省带宽并提升用户体验。

HTML5发送网络请求在不同场景下的选择

虽然Fetch是主流,但在特定场景下，其他方案仍有其价值，了解何时使用何种工具，体现了开发者的专业素养。

大文件上传与下载

对于超大文件,Fetch可能不是最佳选择，因为默认情况下它会尝试将整个响应体加载到内存中，使用ReadableStream结合Blob或File对象进行分片处理更为合适，或者，对于简单的文件下载，直接使用<a>标签的download属性可能更简单高效。

兼容老旧浏览器

尽管现代浏览器支持良好,但在某些企业内网或老旧设备中，仍可能遇到不支持Fetch的环境，使用polyfill库（如whatwg-fetch）可以注入Fetch API的兼容实现，确保代码在所有环境下正常运行。

RESTful API与GraphQL的适配

Fetch API天然适合RESTful风格，通过不同的HTTP方法（GET, POST, PUT, DELETE）映射CRUD操作，而对于GraphQL，由于通常只使用POST请求发送查询，Fetch同样适用，只需调整请求体和头部即可，业内共识认为，无论后端架构如何，前端请求库的抽象层设计应保持一致，以降低维护成本。

HTML5发送网络请求Q&A

HTML5发送网络请求时如何处理全局错误？

可以通过封装一个统一的请求函数,利用Promise的.catch()或async函数的try/catch块集中处理错误，结合浏览器提供的window.onerror或unhandledrejection事件，可以捕获未处理的异常，并上报到监控平台，便于快速定位问题。

HTML5发送网络请求中如何设置请求头？

在fetch函数的第二个参数对象中,通过headers属性设置。headers: { 'Authorization': 'Bearer token', 'Content-Type': 'application/json' }，注意，某些头信息如Host、Content-Length等由浏览器自动管理，手动设置会被忽略或报错。

HTML5发送网络请求与axios有什么区别？

Fetch是浏览器原生API,无需引入额外库，体积小，性能好，axios是一个第三方库，基于XHR封装，提供了更丰富的功能如自动转换JSON、请求取消、拦截器等，且兼容性更好，多数情况下，简单项目推荐原生Fetch，复杂项目或需要广泛兼容性的场景推荐使用axios。