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

目录

一、为什么需要Request?

[二、XMLHttpRequest (XHR) 基础](#二、XMLHttpRequest (XHR) 基础)

[1. 创建请求](#1. 创建请求)

[2. 处理响应](#2. 处理响应)

[3. 关键配置](#3. 关键配置)

[三、Fetch API(推荐方案)](#三、Fetch API(推荐方案))

[1. 发起GET请求](#1. 发起GET请求)

[2. 发起POST请求](#2. 发起POST请求)

[3. 高级配置项](#3. 高级配置项)

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

五、错误处理最佳实践

[1. Fetch API错误捕获](#1. Fetch API错误捕获)

[2. 超时控制(结合AbortController)](#2. 超时控制(结合AbortController))

六、总结与选择建议


一、为什么需要Request?

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

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

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

二、XMLHttpRequest (XHR) 基础
1. 创建请求
javascript 复制代码
const xhr = new XMLHttpRequest();  
xhr.open('GET', 'https://api.example.com/data');  
xhr.send();  
2. 处理响应
javascript 复制代码
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请求
javascript 复制代码
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请求
javascript 复制代码
fetch('https://api.example.com/users', {  
  method: 'POST',  
  headers: {  
    'Content-Type': 'application/json'  
  },  
  body: JSON.stringify({ name: 'John', age: 30 })  
});  
3. 高级配置项
参数 说明
method HTTP方法(GET/POST/PUT等)
headers 请求头对象(如身份验证Token)
body 请求体数据(支持FormData、Blob等)
mode 请求模式(如corsno-cors
cache 缓存策略(no-storereload
四、Request对象封装(Fetch进阶)

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

javascript 复制代码
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错误捕获
javascript 复制代码
fetch(url)  
  .then(response => {  
    if (!response.ok) {  
      throw new Error(`HTTP错误 ${response.status}`);  
    }  
    return response.json();  
  })  
  .catch(error => {  
    console.error('请求异常:', error);  
    // 显示用户提示  
  });  
2. 超时控制(结合AbortController)
javascript 复制代码
const controller = new AbortController();  
const timeoutId = setTimeout(() => controller.abort(), 5000);  

fetch(url, { signal: controller.signal })  
  .then(/* ... */)  
  .catch(() => console.log('请求超时'))  
  .finally(() => clearTimeout(timeoutId));  
六、总结与选择建议
特性 Fetch API XMLHttpRequest
语法简洁度 ✅ Promise链式调用 ❌ 回调嵌套
流式数据处理 ✅ 支持ReadableStream ❌ 不支持
中断请求 ✅ AbortController ✅ xhr.abort()
浏览器兼容性 ❌ 不兼容IE ✅ 全浏览器兼容

推荐策略

  • 现代项目首选 Fetch API

  • 需兼容IE时降级为 XMLHttpRequest

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

相关推荐
quant_198626 分钟前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
中微子3 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君3 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子4 小时前
React 状态管理 源码深度解析
前端·react.js
百锦再4 小时前
详细解析 .NET 依赖注入的三种生命周期模式
java·开发语言·.net·di·注入·模式·依赖
风吹落叶花飘荡5 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则5 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
失败又激情的man5 小时前
python之requests库解析
开发语言·爬虫·python
yanlele5 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4536 小时前
React移动端开发项目优化
前端·react.js·前端框架