✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本

 api.js

//封装ajax方法
import $g from "../sg";//vue项目使用
import $ from 'jquery';//(提示：原生开发页面请前往https://jquery.com下载最新版jQuery)
import { Message } from "element-ui";//element项目使用
// import axios from "axios";// 不同环境的api配置项________________________________________________________________________________
let APIs = [{ label: '师大外网服务器', origins: ['mzjyzyk.ynnu.edu.cn'], API_ROOT_URL: `https://mzjyzyk.ynnu.edu.cn/api`, isProduct: true, },{ label: '师大内网服务器', origins: ['10.10.4.87'], API_ROOT_URL: `http://10.10.4.87:30107/api`, },{ label: '维度云线上测试服务器运行', origins: ['wedoyun.cn'], API_ROOT_URL: `//sr.wedoyun.cn:82/api`, },{label: '本地个人开发环境', origins: ["localhost", "127.0.0.1", "192.168.", "172.20.", "0.0.0.0",], isLocal: true,API_ROOT_URL: "//192.168.1.108:9088/sr", //鲁宝键的IP// API_ROOT_URL = "//192.168.7.95:9088/sr", //无忌的IPAPI_ROOT_URL: "//sr.wedoyun.cn:82/api", //测试服务器的IP},
];
let API = APIs.find(({ origins }) => origins.some(v => location.href.includes(v))) || APIs[0];
let API_ROOT_URL = API.API_ROOT_URL;//一些前提条件和方法________________________________________________________________________________
localStorage.sgAPI && (API_ROOT_URL = localStorage.sgAPI);//如果localStorage.sgAPI存在，优先用这个前缀路径接口访问所有接口
//跳转到登录页面
let jumpLoginPage = ({ url, } = {}) => {url && console.log(`导致跳转到登录页面的接口路径`, url);$g.cookie.clearAll();//清空所有缓存(需要引入sg.js)Object.keys(localStorage).forEach(k => delete localStorage[k]);//清空对象键、值location.hash.includes('/login') || location.replace(`${$g.getWebURLBeforeHash()}#/login?url=${encodeURIComponent(location.href)}`);
}
// 普通报错提示
let sgAlert = (d = `很抱歉，服务太火爆了，请您稍后再试！`) => Message ? Message({ message: d, dangerouslyUseHTMLString: true, showClose: true, }) : alert(d.replace(/\<br\>/g, `\n\r`));
// 接口报错提示
let errAlert = (url, d) => sgAlert(`💡可能是后端报错：<br>接口地址👉${url}<br>返回报文👉${JSON.stringify(d, null, 4)}`);
// 本地接口提示
$g.getUrlParam('isLocal') && (API.isLocal = true);//手动添加开发者开发模式
API.isLocal && sgAlert(`温馨提示：当前处于开发模式，接口访问地址为<b  style="color: #67C23A;" >${API_ROOT_URL}</b>`);//主体请求________________________________________________________________________________
export default {// 共享变量、方法share: {// 一些共享出去的变量$g,isLocal: API.isLocal,//是否本地环境isProduct: API.isProduct,//是否生产环境API_ROOT_URL,//接口根路径imgPrePath: `${API_ROOT_URL}/`,//图片前缀// 一些共享出去的方法jumpLoginPage,},//API FUNCTION ________________________________________________________________________________do(url, data, r, otherConfig = {}) {if (!r) return sgAlert(`注意检查接口${url}的传参“r”是否写成了“doing”`);// delete (data || {}).sgLog;//清除调试状态下的接口标记说明字段let type = otherConfig.type;//请求方式，默认POSTtype || (type = 'POST');//noToken=true代表该接口无需保持登录状态就可以获取信息，譬如一些公共对外开放的接口let token = localStorage.token; //获取tokenif (!otherConfig.noToken) {//判断如果本地没有token，否者直接跳转到登录页面if (!token) return jumpLoginPage({ url });}// 建议：一般情况就不要设置headers了，ajax会根据data结构自动判断类型let headers = {// withCredentials: true ,// 这里可以设置withCredentials// 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',//FormData方式提交数据// 'Content-Type': 'application/json;charset=UTF-8',//报跨域错误...otherConfig.headers,};//判断是否需要令牌字符串if (!otherConfig.noToken) {token && (headers["kkToken"] || (headers["kkToken"] = token));data || (data = {});}// 判断是否为下载接口，防止下载导出文件乱码let xhrFields = otherConfig.isDownload ? { xhrFields: { responseType: "arraybuffer" } } : null;// 判断是否为上传接口let contentType = {};if (otherConfig.isUpload) {/*
【警告！千万不要设置请求头格式！！！ 用<form>表单上传的时候， 请求自动会设置为multipart/form-data; boundary=----WebKitFormBoundary****************】 
如果是用的ajax请求上传File文件必须设置最外层contentType:false，且删除headers中的“Content-Type”，
否则就会导致提示跨域或传参格式没有序列化变成类似：
------WebKitFormBoundaryxWRglNw6MXxmBjr2
Content-Disposition: form-data; name: "字段名1"
EBE29C03DA9E4FB4A050F4D820A834BC
------WebKitFormBoundaryxWRglNw6MXxmBjr2
Content-Disposition: form-data; name="字段名2"
这样的格式。
ajax正确参数如下：
$.ajax({
...headers:{不要有“Content-Type”},processData:false,//必须是falsecontentType:false,//必须是false
...
})*/data = $g.convertObejct2FormData(data);//转换为multipart/form-data数据格式contentType = { contentType: false };//如果不设置就会导致提示跨域或传参格式没有序列化变成类似 ------WebKitFormBoundary... 的分隔请求体}// 序列化设置（是否将数据转换为查询字符串的形式发送给服务器，默认情况下，processData的值为true）let processData = true;(data instanceof FormData) && (processData = false);(typeof otherConfig.processData !== 'undefined') && (processData = otherConfig.processData);// 精简别名r.s && (r.success = r.s); //响应请求成功r.f && (r.fail = r.f); //响应请求失败r.e && (r.error = r.e); //响应请求报错r.l && (r.loading = r.l, r.loading.show && r.loading.show()); //加载$.ajax({timeout: 24 * 60 * 60 * 1000, //设置默认超时时间24小时type,url: otherConfig.isCompleteURL ? url : `${API_ROOT_URL}${url}`,//使用完整接口路径data,//发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。headers,//请求头...xhrFields,//设置XMLHttpRequest对象的属性...contentType,//默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。processData,//默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。beforeSend: xhr => {/* 发送请求前运行的函数。发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。*/},success: d => {if (url.toLocaleLowerCase().includes(`download`) && !otherConfig.hasOwnProperty('isDownload') && typeof d === 'string') return sgAlert(`注意检查接口${url}的“otherConfig”参数是否加入了“isDownload:true”配置"`);if (!otherConfig.isDownload && typeof d === 'string') return sgAlert(`请联系后端开发人员给接口${url}添加@RequestMapping(value=...produces="application/json)"`);// typeof d === 'string' && (d = JSON.parse(d));//如果是字符串返回值，则转换为JSON格式（如果用这句话就会纵容后端开发，导致以后复杂的返回报文也用字符串，会有问题！）r.loading && r.loading.close && r.loading.close(); //关闭加载if (otherConfig.isDownload) return r.success(d); //如果是下载，直接返回文档流switch (d.success) {case true: //登录成功r.success && r.success((otherConfig.isGetAllData || d.hasOwnProperty('totalCount')) ? d : (d.hasOwnProperty('data') ? d.data : d));break;case false: //登录失败（当token密码失效的时候）r.fail ? r.fail(d) : sgAlert(d.msg);break;}switch (d.code) {case 403: //登录失败（当token密码失效的时候）case 404: //登录失败（当token密码失效的时候）jumpLoginPage(); r.fail ? r.fail(d) : sgAlert(d.msg);break;case -2: //扫码失败case -1: //请求失败r.fail ? r.fail(d) : sgAlert(d.msg);break;}},error: d => {//请求报错if (d.status == 403) { jumpLoginPage(); return r.error ? r.error(d) : sgAlert(JSON.parse(d.responseText).msg); }r.loading && r.loading.close && r.loading.close(); //关闭加载r.error ? r.error(d) : errAlert(url, d);// console.log("【报错】" + JSON.stringify(d, null, 4),d);},complete: (xhr, status) => {//请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。}});},
}

sd.js

//公共接口定义2024.11.22----------------------------------------
import $api from "./api";
import $g from "./sg";//vue项目使用
export default {...$api.share,//【通用接口demo】________________________________________________________________________________API_NAME({ data, r, config }) { $api.do(`${API_ROOT_URL}/xxx/xxx/xxx`, data, r, config); },//提交用例________________________________________get({ r }) { $api.do(`${API_ROOT_URL}/get.do`, null, r, { isGetAllData: true, type:`get`, }); },post({ data, r }) { $api.do(`${API_ROOT_URL}/post.do`, data, r); },login({ data, r }) { $api.do(`${API_ROOT_URL}/post.do`, data, r, { noToken: true }); },download({ data, r }) { $api.do(`${API_ROOT_URL}/post.do`, data, r, { isDownload: true }); },}