当前位置: 首页 > news >正文

JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest

目录

一、为什么需要Request?

二、XMLHttpRequest (XHR) 基础

1. 创建请求

2. 处理响应 

3. 关键配置

三、Fetch API(推荐方案)

1. 发起GET请求

2. 发起POST请求 

3. 高级配置项

四、Request对象封装(Fetch进阶)

五、错误处理最佳实践

1. Fetch API错误捕获

2. 超时控制(结合AbortController) 

六、总结与选择建议


一、为什么需要Request?

在Web开发中,前端常需从服务器获取数据(如用户信息、商品列表)或提交数据(如登录表单)。JavaScript通过HTTP请求实现这一过程,核心工具为:

  1. Fetch API(现代标准,基于Promise)

  2. XMLHttpRequest(传统方案,兼容旧浏览器)

 

二、XMLHttpRequest (XHR) 基础
1. 创建请求
const xhr = new XMLHttpRequest();  
xhr.open('GET', 'https://api.example.com/data');  
xhr.send();  

 

2. 处理响应 
xhr.onload = function() {  if (xhr.status >= 200 && xhr.status < 300) {  console.log(JSON.parse(xhr.responseText));  } else {  console.error('请求失败:', xhr.status);  }  
};  

 

3. 关键配置
  • 设置请求头:xhr.setRequestHeader('Content-Type', 'application/json')

  • 指定响应类型:xhr.responseType = 'json'

适用场景:兼容IE等旧浏览器。

 

三、Fetch API(推荐方案)
1. 发起GET请求
fetch('https://api.example.com/data')  .then(response => {  if (!response.ok) throw new Error('网络响应异常');  return response.json(); // 解析JSON数据  })  .then(data => console.log(data))  .catch(error => console.error('请求失败:', error));  

 

2. 发起POST请求 
fetch('https://api.example.com/users', {  method: 'POST',  headers: {  'Content-Type': 'application/json'  },  body: JSON.stringify({ name: 'John', age: 30 })  
});  
3. 高级配置项
参数说明
methodHTTP方法(GET/POST/PUT等)
headers请求头对象(如身份验证Token)
body请求体数据(支持FormData、Blob等)
mode请求模式(如corsno-cors
cache缓存策略(no-storereload

 

四、Request对象封装(Fetch进阶)

可复用配置的Request对象示例:

const request = new Request('https://api.example.com/data', {  method: 'GET',  headers: new Headers({  'Authorization': 'Bearer token123'  })  
});  fetch(request)  .then(response => response.json())  .then(data => console.log(data));  

 

五、错误处理最佳实践
1. Fetch API错误捕获
fetch(url)  .then(response => {  if (!response.ok) {  throw new Error(`HTTP错误 ${response.status}`);  }  return response.json();  })  .catch(error => {  console.error('请求异常:', error);  // 显示用户提示  });  

 

2. 超时控制(结合AbortController) 
const controller = new AbortController();  
const timeoutId = setTimeout(() => controller.abort(), 5000);  fetch(url, { signal: controller.signal })  .then(/* ... */)  .catch(() => console.log('请求超时'))  .finally(() => clearTimeout(timeoutId));  

六、总结与选择建议
特性Fetch APIXMLHttpRequest
语法简洁度✅ Promise链式调用❌ 回调嵌套
流式数据处理✅ 支持ReadableStream❌ 不支持
中断请求✅ AbortController✅ xhr.abort()
浏览器兼容性❌ 不兼容IE✅ 全浏览器兼容

推荐策略

  • 现代项目首选 Fetch API

  • 需兼容IE时降级为 XMLHttpRequest

  • 复杂场景使用库(如Axios)封装

 

http://www.dtcms.com/a/269905.html

相关文章:

  • 单稳态触发器Multisim电路仿真——硬件工程师笔记
  • imx6ull-裸机学习实验11——高精度延时实验
  • 铝板矫平机:精密平整的关键设备
  • AI 在生活中的应用:深度解析与技术洞察
  • [2025CVPR]SGC-Net:开放词汇人机交互检测的分层粒度比较网络解析
  • Java教程:【程序调试技巧】入门
  • Leetcode 3604. Minimum Time to Reach Destination in Directed Graph
  • Windows安装docker+Dify本地部署
  • IB智慧公交系统的设计与实现
  • Python之--列表
  • 【AI大模型】PyTorch Autograd 实战
  • 测量认知革命:Deepoc大模型如何重构示波器的存在形态
  • Cursor配置DeepSeek调用MCP服务实现任务自动化
  • Flutter编译安卓应用时遇到的compileDebugJavaWithJavac和compileDebugKotlin版本不匹配的问题
  • GC4344:高性能音频 DAC 芯片解析
  • 【ASP.NET Core】深入理解Controller的工作机制
  • Android T startingwindow使用总结
  • 【AI智能体】智能音视频-硬件设备基于 WebSocket 实现语音交互
  • ReactNative【实战系列教程】我的小红书 4 -- 首页(含顶栏tab切换,横向滚动频道,频道编辑弹窗,瀑布流布局列表等)
  • 深入解读MCP:构建低延迟、高吞吐量通信中间件
  • Terraform `for_each` 精讲:优雅地自动化多域名证书验证
  • ELK日志分析
  • Spring Boot 项目中的多数据源配置
  • Go语言网络游戏服务器模块化编程
  • C++——从C到C++
  • Mybatis-plus 中 LambdaQueryWrapper和QueryWrapper 区别对比,及完整示例演示
  • 大型语言模型(LLM)的最新研究进展及相关新信息技术
  • 如何在 Android Framework层面控制高通(Qualcomm)芯片的 CPU 和 GPU。
  • 在Docker中安装nexus3(作为maven私服)
  • 使用Node.js搭建Web应用有哪些注意事项?