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

封装$.ajax

前提:需引入jQuery和layui

封装后的特性:可异步,可同步,整合了layUI一些样式 

(后续会推出layui封装版本,用于快速开发出后端管理系统,兼容移动/pc屏幕。思想是:除了少量js代码,基本上只需要写好HTML即可实现页面上的增删改查。个人感觉比vue项目简单很多,我不需要定义data,不需要写事件,只需要写好HTML,自定义好属性功能就完成 ,专用于全栈且不是前后端分离项目)

使用方式:

	var p = my.reqApi({url: 'base/BASE_Types_GetData2',data: JSON.stringify({}),contentType: 'application/json;charset=utf-8', //设置请求头信息done: function (result) {console.log('请求地址是:sm/FaceCost_Groups_GetData' )}});// await Promise.all([p]); //开启同步console.log("执行完成")

封装ajax: 

/*** 封装统一的请求方法* @param {Object} obj - 请求配置对象* @param {string} obj.url - 请求URL* @param {string} [obj.type='POST'] - 请求方法 (GET/POST等)* @param {Object} [obj.data] - 请求参数* @param {string} [obj.dataType='json'] - 响应数据类型* @param {boolean} [obj.async=true] - 是否异步请求* @param {boolean} [obj.cache=true] - 是否缓存* @param {string} [obj.contentType='application/x-www-form-urlencoded'] - 请求头Content-Type* @param {boolean} [obj.processData=true] - 是否处理数据* @param {boolean} [obj.notLoad=false] - 是否不显示加载动画* @param {boolean} [obj.notLayMsg=false] - 请求执行成功返回msg有值时是否弹出展示* @param {Function} [obj.done] - 成功回调* @param {Function} [obj.error] - 失败回调* @param {Function} [obj.beforeSend] - 请求前回调* @returns {Promise} 返回Promise对象*/reqApi: function(obj) {// 设置默认值const defaults = {processData: true,contentType: 'application/x-www-form-urlencoded',async: true,cache: true,dataType: 'json',type: 'POST',notLoad: false,notLayMsg:false};// 合并用户配置和默认配置const config = { ...defaults, ...obj };// 显示加载动画let loadingIndex;if (!config.notLoad) {loadingIndex = layer.load(2, { shade: false });}// 返回Promise以便支持async/awaitreturn new Promise((resolve, reject) => {$.ajax({url: config.url,type: config.type,dataType: config.dataType,data: config.data,async: config.async,cache: config.cache,contentType: config.contentType,processData: config.processData,beforeSend: function(jqXHR, settings) {if (typeof config.beforeSend === 'function') {config.beforeSend(jqXHR, settings);}},success: function(result) {// 统一处理成功响应handleResponse(result, resolve, reject, config);},complete: function() {if (loadingIndex) layer.close(loadingIndex);},error: function(error) {handleError(error, reject, config);}});});/*** 处理响应结果*/function handleResponse(result, resolve, reject, config) {// 特殊状态码处理if (result.code === -100) {location.href = "";return;}// 成功状态码范围if (result.code != 200 && result.msg){layer.msg(result.msg);}else if(result.msg && !config.notLayMsg){layer.msg(result.msg);}// 回调处理if (typeof config.done === 'function') {config.done(result);}// Promise 解析resolve(result);}/*** 处理错误*/function handleError(error, reject, config) {let errorData;try {errorData = JSON.parse(error.responseText);} catch (e) {errorData = error;}// 回调处理if (typeof config.error === 'function') {config.error(errorData);} else {layer.msg('网络请求出错');}// Promise 拒绝reject(errorData);}}
http://www.dtcms.com/a/303954.html

相关文章:

  • 一个人开发一个App(数据库)
  • OpenAI Python API 完全指南:从入门到实战
  • 【学习笔记】Lean4 定理证明 ing
  • 7.29错题(zz)史纲 7章 建立新中国
  • Scala实用编程(附电子书资料)
  • Node.js 内置模块
  • AR辅助前端设计:虚实融合场景下的设备维修指引界面开发实践
  • 学习Scala语言的最佳实践有哪些?
  • GCC、glibc、GNU C(gnuc)的关系
  • SkSurface---像素的容器:表面
  • PowerShell脚本自动卸载SQL Server 2025和 SSMS
  • 零基础-动手学深度学习-7.7 稠密连接网络(DenseNet)
  • 景区负氧离子环境监测系统云平台方案
  • 论文阅读:2024 arxiv AutoDefense: Multi-Agent LLM Defense against Jailbreak Attacks
  • 【OpenAI】ChatGPT辅助编码:Spring Boot + Copilot自动生成业务逻辑
  • 【MySQL】从连接数据库开始:JDBC 编程入门指南
  • Java优雅使用Spring Boot+MQTT推送与订阅
  • vue请求golang后端CORS跨域问题深度踩坑
  • 【STM32】FreeRTOS 任务消息队列 和 中断消息队列的区别(六)
  • 14 - 大语言模型 — 抽取式问答系统 “成长记”:靠 BERT 学本事,从文本里精准 “揪” 答案的全过程(呆瓜版-1号)
  • “非参数化”大语言模型与RAG的关系?
  • 云原生MySQL Operator开发实战(五):扩展与生态系统集成
  • python使用ffmpeg录制rtmp/m3u8推流视频并按ctrl+c实现优雅退出
  • DateTime::ToString 日期时间文本格式化深度解析(C++)
  • Mysql InnoDB存储引擎
  • 2.快速开始
  • Windows下基于 SenseVoice模型的本地语音转文字工具
  • 【Linux我做主】探秘进程状态
  • 聚铭安全管家平台2.0实战解码 | 安服篇(三):配置保障 自动核查
  • 从单机架构到分布式:Redis为何成为架构升级的关键一环?