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

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

sd.js源码

import $g from "./sg";//vue项目使用
import $ from 'jquery';//(提示:原生开发页面请前往https://jquery.com下载最新版jQuery)
import { Message } from "element-ui";//element项目使用
let isLocal = [
    "localhost",
    "127.0.0.1",
    "192.168",
    "0.0.0.0",
].some(v => location.href.includes(v)); //是否本地运行
//常用路径________________________________________________________________________________
let API_ROOT_URL = "http://xxx.xxx.com/api"; //生产的IP
if (isLocal) {
    API_ROOT_URL = "//192.168.1.xxx:8088/api"; //本地联调时候,开发者xxx的IP
}
//一些前提条件和方法________________________________________________________________________________
//跳转到登录页面
let jumpLoginPage = () => {
    $g.cookie.clearAll();//清空所有缓存(需要引入sg.js)
    Object.keys(localStorage).forEach(k => delete localStorage[k]);//清空对象键、值
    location.hash.includes('/login') || location.replace(`${location.origin}${location.pathname}#/login?url=${encodeURIComponent(location.href)}`);
}
// 普通报错提示
let sgAlert = (d) => Message ? Message.error(d) : alert(d);
// 报错提示
let errAlert = (url, d) => sgAlert(`【可能是后端报错】\n\r【接口地址】${url}\n\r【返回报文】${JSON.stringify(d, null, 4)}`);
//主体请求________________________________________________________________________________
export default {
    // 一些共享出去的变量
    $g,
    isLocal,
    API_ROOT_URL,
    imgPrePath: API_ROOT_URL + '/',
    // 一些共享出去的方法
    jumpLoginPage,
    //API FUNCTION ________________________________________________________________________________
    __sd(type, url, data, doing, otherConfig = {}) {
        // delete (data || {}).sgLog;//清除调试状态下的接口标记说明字段
        type || (type = 'POST');
        //noAutoToken=true代表该接口无需保持登录状态就可以获取信息,譬如一些公共对外开放的接口
        let token = localStorage.token; //获取token
        if (!otherConfig.noAutoToken) {
            //判断如果本地没有token,否者直接跳转到登录页面
            if (!token) return jumpLoginPage();
        }
        let headers = {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',//FormData方式提交数据
        };
        if (!otherConfig.noAutoToken) {
            token && (headers["kkToken"] || (headers["kkToken"] = token));
            data || (data = {});
        }
        // 防止下载导出文件乱码
        let xhrFields = otherConfig.isDownload ? { xhrFields: { responseType: "arraybuffer" } } : null;
        // 序列化设置(是否将数据转换为查询字符串的形式发送给服务器,默认情况下,processData的值为true)
        let processData = true;
        (data instanceof FormData) && (processData = false);
        (typeof otherConfig.processData !== 'undefined') && (processData = otherConfig.processData);
        // 精简别名
        doing.s && (doing.success = doing.s); //响应请求成功
        doing.f && (doing.fail = doing.f); //响应请求失败
        doing.e && (doing.error = doing.e); //响应请求报错
        doing.l && (doing.loading = doing.l, doing.loading.show && doing.loading.show()); //加载
        $.ajax({
            timeout: 10 * 60 * 1000, //设置默认超时时间10分钟
            type,
            url,
            ...xhrFields,
            data,
            headers,
            processData,
            success: d => {
                // typeof d === 'string' && (d = JSON.parse(d));//如果是字符串返回值,则转换为JSON格式
                doing.loading && doing.loading.close && doing.loading.close(); //关闭加载
                if (otherConfig.isDownload) return doing.success(d); //如果是下载,直接返回文档流
                switch (d.success) {
                    case true: //登录成功
                        doing.success && doing.success(otherConfig.isGetAllData ? d : (d.data || d));
                        break;
                    case false: //登录失败(当token密码失效的时候)
                        doing.fail ? doing.fail(d) : sgAlert(d.msg);
                        break;
                }
                switch (d.code) {
                    case 403: //登录失败(当token密码失效的时候)
                    case 404: //登录失败(当token密码失效的时候)
                        jumpLoginPage(); doing.fail ? doing.fail(d) : sgAlert(d.msg);
                        break;
                    case -2: //扫码失败
                    case -1: //请求失败
                        doing.fail ? doing.fail(d) : sgAlert(d.msg);
                        break;
                }
            },
            error: d => {
                //请求报错
                if (d.status == 403) { jumpLoginPage(); return doing.error ? doing.error(d) : sgAlert(JSON.parse(d.responseText).msg); }
                doing.loading && doing.loading.close && doing.loading.close(); //关闭加载
                doing.error ? doing.error(d) : errAlert(url, d);
                // console.log("【报错】" + JSON.stringify(d, null, 4),d);
            },
        });
    },
    //【通用接口demo】________________________________________________________________________________
    API_NAME({ data, r, config }) { this.__sd("post", `${API_ROOT_URL}/xxx/xxx/xxx`, data, r, config); },
    //提交用例________________________________________
    get({ r }) { this.__sd("get", `${API_ROOT_URL}/get.do`, null, r, { isGetAllData: true }); },
    post({ data, r }) { this.__sd("post", `${API_ROOT_URL}/post.do`, data, r); },
    login({ data, r }) { this.__sd("post", `${API_ROOT_URL}/post.do`, data, r, { noAutoToken: true }); },
    download({ data, r }) { this.__sd("post", `${API_ROOT_URL}/post.do`, data, r, { isDownload: true }); },
}

调用方式

let data = {
    ID: 1,
    sgLog: `强哥请求来源:${this.$options.name}`,
};
this.$d.接口名称({
    data,
    r: {
        s: d => {
            console.log("【成功】", d);
        }
    }
});

为了高效敏捷开发,写了一个基于上面的接口封装自动生成API请求代码片段的小工具

image.png


目录
打赏
0
0
0
0
73
分享
相关文章
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
59 10
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
69 3
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
95 12
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
Vue.js 3中的Composition API:提升你的组件开发体验
Vue.js 3中的Composition API:提升你的组件开发体验
109 1
深入浅出Node.js:从零开始构建RESTful API
【10月更文挑战第39天】 在数字化时代的浪潮中,API(应用程序编程接口)已成为连接不同软件应用的桥梁。本文将带领读者从零基础出发,逐步深入Node.js的世界,最终实现一个功能完备的RESTful API。通过实践,我们将探索如何利用Node.js的异步特性和强大的生态系统来构建高效、可扩展的服务。准备好迎接代码和概念的碰撞,一起解锁后端开发的新篇章。