【HTML5】【AJAX的几种封装方法详解】

【HTML5】【AJAX的几种封装方法详解】

AJAX (Asynchronous JavaScript and XML) 封装是为了简化重复的异步请求代码，提高开发效率和代码复用性。下面我将介绍几种常见的 AJAX 封装方式。
在这里插入图片描述

方法1. 基于原生 XMLHttpRequest 的封装

XMLHttpRequest。其主要特点如下：

  1. 实现动态不刷新，通过异步⽅式，提升⽤户体验，优化了浏览器和服务器之间的传输。
  2. 把⼀部分原本由服务器负担的⼯作转移到客户端，利⽤客户端闲置的资源进⾏处理，减轻服务器和带宽的负担，节约空间和成本。
  3. ⽆刷新更新⻚⾯，⽤户不⽤再像以前⼀样在服务器处理数据时，只能在死板的⽩屏前焦急的等待。AJAX使⽤XMLHttpRequest对象发送请求并得到服务器响应，在不需要重新载⼊整个⻚⾯的情况下，就可以通过DOM及时将更新的内容显示在⻚⾯上。
/*** 基于原生XHR的AJAX封装* @param {Object} options 配置对象* @param {string} options.url 请求地址* @param {string} [options.method='GET'] 请求方法* @param {Object} [options.data=null] 请求数据* @param {Object} [options.headers={}] 请求头* @param {function} [options.success] 成功回调* @param {function} [options.error] 失败回调*/
function ajax(options) {const xhr = new XMLHttpRequest();const method = options.method || 'GET';let url = options.url;let data = options.data || null;// 处理GET请求的查询参数if (method === 'GET' && data) {const params = new URLSearchParams();for (const key in data) {params.append(key, data[key]);}url += '?' + params.toString();data = null;}xhr.open(method, url, true);// 设置请求头if (options.headers) {for (const key in options.headers) {xhr.setRequestHeader(key, options.headers[key]);}}xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {let response = xhr.responseText;try {response = JSON.parse(response);} catch (e) {}options.success && options.success(response);} else {options.error && options.error(xhr.status, xhr.statusText);}}};xhr.onerror = function() {options.error && options.error(-1, 'Network Error');};// 发送请求if (data && typeof data === 'object') {xhr.setRequestHeader('Content-Type', 'application/json');xhr.send(JSON.stringify(data));} else {xhr.send(data);}
}// 使用示例
ajax({url: '/api/user',method: 'POST',data: { name: 'John', age: 30 },headers: {'Authorization': 'Bearer token123'},success: function(response) {console.log('Success:', response);},error: function(status, statusText) {console.error('Error:', status, statusText);}
});

方法2. 基于 Fetch API 的封装

/*** 基于Fetch API的AJAX封装* @param {string} url 请求地址* @param {Object} [options={}] 请求配置* @returns {Promise} 返回Promise对象*/
function fetchAjax(url, options = {}) {const defaultOptions = {method: 'GET',headers: {'Content-Type': 'application/json'},credentials: 'same-origin', // 携带cookie...options};// 处理GET请求的查询参数if (defaultOptions.method === 'GET' && defaultOptions.body) {const params = new URLSearchParams();for (const key in defaultOptions.body) {params.append(key, defaultOptions.body[key]);}url += '?' + params.toString();delete defaultOptions.body;}// 处理非GET请求的body数据if (defaultOptions.body && typeof defaultOptions.body === 'object') {defaultOptions.body = JSON.stringify(defaultOptions.body);}return fetch(url, defaultOptions).then(async response => {const data = await response.json().catch(() => ({}));if (!response.ok) {const error = new Error(response.statusText);error.response = response;error.data = data;throw error;}return data;});
}// 使用示例
fetchAjax('/api/user', {method: 'POST',body: { name: 'John', age: 30 },headers: {'Authorization': 'Bearer token123'}
})
.then(data => console.log('Success:', data))
.catch(err => console.error('Error:', err));

方法 3. 基于 Axios 风格的封装

class Ajax {constructor(baseURL = '', timeout = 10000) {this.baseURL = baseURL;this.timeout = timeout;this.interceptors = {request: [],response: []};}request(config) {// 处理请求拦截器let chain = [this._dispatchRequest, undefined];this.interceptors.request.forEach(interceptor => {chain.unshift(interceptor.fulfilled, interceptor.rejected);});this.interceptors.response.forEach(interceptor => {chain.push(interceptor.fulfilled, interceptor.rejected);});let promise = Promise.resolve(config);while (chain.length) {promise = promise.then(chain.shift(), chain.shift());}return promise;}_dispatchRequest(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();let url = config.baseURL ? config.baseURL + config.url : config.url;let data = config.data;// 处理GET请求参数if (config.method === 'GET' && data) {const params = new URLSearchParams();for (const key in data) {params.append(key, data[key]);}url += '?' + params.toString();data = null;}xhr.timeout = config.timeout || 10000;xhr.open(config.method, url, true);// 设置请求头if (config.headers) {for (const key in config.headers) {xhr.setRequestHeader(key, config.headers[key]);}}xhr.onload = function() {if (xhr.status >= 200 && xhr.status < 300) {let response = xhr.responseText;try {response = JSON.parse(response);} catch (e) {}resolve({data: response,status: xhr.status,statusText: xhr.statusText,headers: xhr.getAllResponseHeaders()});} else {reject(new Error(`Request failed with status code ${xhr.status}`));}};xhr.onerror = function() {reject(new Error('Network Error'));};xhr.ontimeout = function() {reject(new Error('Timeout'));};// 发送请求if (data && typeof data === 'object') {xhr.setRequestHeader('Content-Type', 'application/json');xhr.send(JSON.stringify(data));} else {xhr.send(data);}});}get(url, config = {}) {return this.request({...config,method: 'GET',url});}post(url, data, config = {}) {return this.request({...config,method: 'POST',url,data});}// 添加拦截器useRequestInterceptor(fulfilled, rejected) {this.interceptors.request.push({ fulfilled, rejected });return this.interceptors.request.length - 1;}useResponseInterceptor(fulfilled, rejected) {this.interceptors.response.push({ fulfilled, rejected });return this.interceptors.response.length - 1;}// 移除拦截器ejectRequestInterceptor(id) {if (this.interceptors.request[id]) {this.interceptors.request.splice(id, 1);}}ejectResponseInterceptor(id) {if (this.interceptors.response[id]) {this.interceptors.response.splice(id, 1);}}
}// 使用示例
const api = new Ajax('https://api.example.com');// 添加请求拦截器
api.useRequestInterceptor(config => {config.headers = config.headers || {};config.headers['Authorization'] = 'Bearer token123';return config;
});// 添加响应拦截器
api.useResponseInterceptor(response => {console.log('Response:', response);return response.data;
}, error => {console.error('Error:', error);return Promise.reject(error);
});// 发起请求
api.get('/user/123').then(data => console.log('User data:', data)).catch(err => console.error('Error:', err));api.post('/user', { name: 'John', age: 30 }).then(data => console.log('Created user:', data)).catch(err => console.error('Error:', err));

4. 封装要点总结

统一接口：提供一致的调用方式，如get(), post()等方法

参数处理：

GET请求自动拼接查询参数

POST请求自动处理Content-Type

拦截器机制：支持请求/响应拦截

错误处理：统一错误处理逻辑

Promise支持：返回Promise便于链式调用

超时处理：设置合理的请求超时时间

扩展性：支持自定义配置和拦截器

5. 实际项目中的增强功能

1.自动重试机制：

function withRetry(fn, retries = 3, delay = 1000) {return function(...args) {return new Promise((resolve, reject) => {function attempt(retryCount) {fn(...args).then(resolve).catch(err => {if (retryCount < retries) {setTimeout(() => attempt(retryCount + 1), delay);} else {reject(err);}});}attempt(0);});};
}// 使用示例
const ajaxWithRetry = withRetry(ajax, 3, 1000);

2.请求取消功能：

function createCancelToken() {let cancel;const token = new Promise((resolve, reject) => {cancel = reject;});return { token, cancel };
}// 在请求中检查取消token
function ajaxWithCancel(options) {const { token, cancel } = createCancelToken();const xhr = new XMLHttpRequest();const promise = new Promise((resolve, reject) => {// ...正常请求逻辑// 检查取消token.catch(err => {xhr.abort();reject(err);});});return { promise, cancel };
}

3.请求缓存：

const cache = new Map();function cachedAjax(options) {const cacheKey = JSON.stringify(options);if (cache.has(cacheKey)) {return Promise.resolve(cache.get(cacheKey));}return ajax(options).then(response => {cache.set(cacheKey, response);return response;});
}

根据项目需求选择合适的封装方式，小型项目可使用简单封装，大型项目建议使用成熟的库如Axios。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.pswp.cn/pingmian/81721.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++ - 网络编程之初始连接（Winsock2 概述、初始连接案例、初始连接案例解读）

C++ - 网络编程之初始连接（Winsock2 概述、初始连接案例、初始连接案例解读）

一、Winsock2 概述 Winsock2&#xff08;Windows Sockets 2&#xff09;是微软提供的 Windows 平台网络编程库 二、初始连接案例 1、Server #include <winsock2.h> #include <ws2tcpip.h> #include <iostream>#pragma comment(lib, "ws2_32.lib&quo…
阅读更多...
Spring Cloud Gateway深度解析：原理、架构与生产实践

Spring Cloud Gateway深度解析：原理、架构与生产实践

文章目录 前言一、概述二、核心架构设计及设计原理2.1 分层架构模型网络层&#xff08;I/O模型&#xff09;核心处理层 2.2 核心组件协作流程路由定位阶段过滤器执行阶段 2.3 响应式编程模型实现Reactor上下文传递背压处理机制 2.4 动态路由设计原理2.5 异常处理体系2.6 关键路…
阅读更多...
游戏开发实战（一）：Python复刻「崩坏星穹铁道」嗷呜嗷呜事务所---源码级解析该小游戏背后的算法与设计模式【纯原创】

游戏开发实战（一）：Python复刻「崩坏星穹铁道」嗷呜嗷呜事务所---源码级解析该小游戏背后的算法与设计模式【纯原创】

文章目录 奇美拉项目游戏规则奇美拉(Chimeras)档案领队成员 结果展示&#xff1a; 奇美拉项目 由于项目工程较大&#xff0c;并且我打算把我的思考过程和实现过程中踩过的坑都分享一下&#xff0c;因此会分3-4篇博文详细讲解本项目。本文首先介绍下游戏规则并给出奇美拉档案。…
阅读更多...
说一下响应状态码有哪些？

说一下响应状态码有哪些？

HTTP响应状态码分类（RFC 7231标准） 1. 1xx（信息类） 临时响应，表示请求已被接收，需要继续处理 100 Continue：客户端应继续发送请求体 101 Switching Protocols：服务器同意升级协议（如WebSocket） 102 Processing（WebDAV）：服务器正在处理但未完成 2. 2xx（成功类）…
阅读更多...
Linux多进程 写时拷贝 物理地址和逻辑地址

Linux多进程 写时拷贝 物理地址和逻辑地址

如果不采用写时拷贝技术 直接fork子进程 会发生什么&#xff1f; 如上图所示 橙色为父进程所占内存空间 绿色为子进程所占内存空间。 如果子进程只是需要做出一点点和父进程不一样的 其余和父进程均为相同 第一 就会出现复制开销比较大&#xff1b;第二占用内存空间 所以 …
阅读更多...
【TTS回顾】Bert-VITS2深度解析：融合BERT的多语言语音合成模型

【TTS回顾】Bert-VITS2深度解析：融合BERT的多语言语音合成模型

一、基本介绍 Bert-VITS2是基于VITS（Variational Inference with adversarial learning for end-to-end Text-to-Speech）的改进版本，通过整合BERT语义编码能力，显著提升了语音合成的自然度和表现力。项目地址：https://github.com/fishaudio/Bert-VITS2 语种自然度相似度流…
阅读更多...
win11下docker 的使用方案

win11下docker 的使用方案

Windows 11 Docker 使用方式对比 特性Docker Desktop (使用 WSL 2 后端)直接在 WSL 2 中安装 Docker Engine安装与易用性极简&#xff0c;一键安装&#xff0c;提供直观的 GUI 界面 管理容器、镜像、卷等相对复杂&#xff0c;需手动在 Linux 环境中安装 Docker Daemon 并配置G…
阅读更多...
配合本专栏前端文章对应的后端文章——从模拟到展示：一步步搭建传感器数据交互系统

配合本专栏前端文章对应的后端文章——从模拟到展示：一步步搭建传感器数据交互系统

对应文章&#xff1a;进一步完善前端框架搭建及vue-konva依赖的使用&#xff08;Vscode&#xff09;-CSDN博客 目录 一、后端开发 1.模拟传感器数据 2.前端页面呈现数据后端互通 2.1更新模拟传感器数据程序&#xff08;多次请求&#xff09; 2.2&#x1f9e9; 功能目标 …
阅读更多...
牛客网NC209794:使徒袭来

牛客网NC209794:使徒袭来

牛客网NC209794:使徒袭来 题目背景 问题分析 数学建模 设三位驾驶员的战斗力分别为 a, b, c已知条件&#xff1a;a b c n (n为输入的正整数)目标&#xff1a;求 a b c 的最小值 解题思路 根据算术-几何平均值不等式(AM-GM不等式)&#xff0c;对于任意正实数a, b, c&a…
阅读更多...
动态规划之爬楼梯模型

动态规划之爬楼梯模型

文章目录 爬楼梯模型LeetCode 746. 使用最小花费爬楼梯思路Golang 代码 LeetCode 377. 组合总和 Ⅳ思路Golang 代码 LeetCode 2466. 统计构造好字符串的方案数思路Golang 代码 LeetCode 2266. 统计打字方案数思路Golang 代码 爬楼梯模型 爬楼梯模型是动态规划当中的一个经典模型…
阅读更多...
【每天一个知识点】湖仓一体（Data Lakehouse）

【每天一个知识点】湖仓一体（Data Lakehouse）

“湖仓一体”&#xff08;Data Lakehouse&#xff09;是一种融合了数据湖&#xff08;Data Lake&#xff09;与数据仓库&#xff08;Data Warehouse&#xff09;优势的新型数据架构。它既继承了数据湖对多类型数据的灵活存储能力&#xff0c;也具备数据仓库对结构化数据的高效查…
阅读更多...
Linux | mdadm 创建软 RAID

Linux | mdadm 创建软 RAID

注&#xff1a;本文为 “Linux mdadm RAID” 相关文章合辑。 略作重排&#xff0c;未整理去重。 如有内容异常&#xff0c;请看原文。 Linux 下用 mdadm 创建软 RAID 以及避坑 喵ฅ・&#xfecc;・ฅ Oct 31, 2023 前言 linux 下组软 raid 用 mdadm 命令&#xff0c;multi…
阅读更多...
Unity自定义shader打包SpriteAtlas图集问题

Unity自定义shader打包SpriteAtlas图集问题

Unity打包图集还是有一些坑的&#xff0c;至于图集SpriteAtlas是什么请参考我之前写的文章&#xff1a;【Sprite Atlas】Unity新图集系统SpriteAtlas超详细使用教程_spriteatlas 使用-CSDN博客 问题&#xff1a; 今天碰到的问题是&#xff0c;shader绘制的时候&#xff0c;因…
阅读更多...
如何用 OceanBase 的 LOAD DATA 旁路导入进行大表迁移

如何用 OceanBase 的 LOAD DATA 旁路导入进行大表迁移

前言 在日常工作中&#xff0c;我们时常会遇到需要将某个大数据量的单表进行迁移的情况。在MySQL中&#xff0c;针对这样的大表&#xff0c;我们通常会选择先将原表导出为csv格式&#xff0c;然后利用LOAD DATA语法来导入csv文件&#xff0c;这种方法相较于mysqldump在效率上有…
阅读更多...
VR 互动实训的显著优势​

VR 互动实训的显著优势​

&#xff08;一&#xff09;沉浸式学习&#xff0c;提升培训效果​ 在 VR 互动实训中&#xff0c;员工不再是被动的知识接受者&#xff0c;而是主动的参与者。以销售培训为例&#xff0c;员工戴上 VR 设备&#xff0c;就能置身于逼真的销售场景中&#xff0c;与虚拟客户进行面对…
阅读更多...
OpenCV 第6课 图像处理之几何变换（重映射）

OpenCV 第6课 图像处理之几何变换（重映射）

1. 概述 简单来说，重映射就是把一副图像内的像素点按照规则映射到到另外一幅图像内的对应位置上去，形成一张新的图像。 因为原图像与目标图像的像素坐标不是一一对应的。一般情况下，我们通过重映射来表达每个像素的位置（x,y），像这样： g(x,y)=f(h(x,y)) 在这里g()是目标图…
阅读更多...
Java虚拟机 - 程序计数器和虚拟机栈

Java虚拟机 - 程序计数器和虚拟机栈

运行时数据结构 Java运行时数据区程序计数器为什么需要程序计数器执行流程虚拟机栈虚拟机栈作用虚拟机栈核心结构运行机制 Java运行时数据区 首先介绍Java运行时数据之前&#xff0c;我们要了解&#xff0c;对于计算机来说&#xff0c;内存是非常重要的资源&#xff0c;因为内…
阅读更多...
MySQL数据库——支持远程IP访问的设置方法总结

MySQL数据库——支持远程IP访问的设置方法总结

【系列专栏】&#xff1a;博主结合工作实践输出的&#xff0c;解决实际问题的专栏&#xff0c;朋友们看过来&#xff01; 《项目案例分享》 《极客DIY开源分享》 《嵌入式通用开发实战》 《C语言开发基础总结》 《从0到1学习嵌入式Linux开发》 《QT开发实战》 《Android开发实…
阅读更多...
CSS- 4.6 radiu、shadow、animation动画

CSS- 4.6 radiu、shadow、animation动画

本系列可作为前端学习系列的笔记&#xff0c;代码的运行环境是在HBuilder中&#xff0c;小编会将代码复制下来&#xff0c;大家复制下来就可以练习了&#xff0c;方便大家学习。 HTML系列文章 已经收录在前端专栏&#xff0c;有需要的宝宝们可以点击前端专栏查看&#xff01; 点…
阅读更多...
排序算法之基础排序:冒泡,选择,插入排序详解

排序算法之基础排序:冒泡,选择,插入排序详解

排序算法之基础排序&#xff1a;冒泡、选择、插入排序详解 前言一、冒泡排序&#xff08;Bubble Sort&#xff09;1.1 算法原理1.2 代码实现&#xff08;Python&#xff09;1.3 性能分析 二、选择排序&#xff08;Selection Sort&#xff09;2.1 算法原理2.2 代码实现&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023