sd.js 2.0封装:更加简化请求传参内容(逐步废弃、逐渐日落2024.01.02)

简介: sd.js 2.0封装:更加简化请求传参内容(逐步废弃、逐渐日落2024.01.02)

sd.js

import $global from "./global";
import $g from "./sg";
import $ from "jquery";
import {Message, Loading} from "element-ui";//引入饿了么相关组件
import {Base64} from "js-base64"; //cnpm i --save js-base64 & cnpm i --save
//import axios from 'axios';
 
const isLocal = location.href.includes("localhost") || location.href.includes("127.0.0.1") || location.href.includes("192.168"); //是否本地运行
//常用路径----------------------------------------------------------------
// const API_ROOT_URL = "//xxx.xxx.com/api"; //发布到服务器用这个,远程测试服务器
const API_ROOT_URL = "/api"; //本地代理测试服务器
 
 
if (isLocal) {
    var isLocalAPI = API_ROOT_URL.includes("localhost") || API_ROOT_URL.includes("127.0.0.1") || API_ROOT_URL.includes("192.168");
    Message.error(`测试环境:${isLocalAPI ? "本地" : "远程服务器"}API`);
}
 
// 常量----------------------------------------
const website = {
    clientId: "xxx",
    clientSecret: "xxx"
};
//主体请求----------------------------------------------------------------
export default {
    //API URL❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
 
    // 公共方法________________________________________________
    //API FUNCTION ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
    load: {},
    // 显示加载动画
    loading(text = "加载中…", name) {
        this.load && (this.load[name] = Loading.service({text}));
    },
    // 显示加载动画
    hideLoading(name) {
        this.load && this.load[name] && this.load[name].close();
    },
    // 错误提示
    errorTip(where, d, url) {
        Message.error("【可能是" +
            where + "报错】\n\r" +
            "接口地址:" + url + "\n\r" +
            "返回报文:" + JSON.stringify(d, null, 4));
    },
    // 跳转到登录页面
    jumpLoginPage(todo = false) {
        if (!location.hash.includes("/login")) {
            if (todo) {
                Message.success("已退出");
            } else {
                var token = $g.cookie.get("token"); //获取token
                Message.error(token ? "登录状态已过期,请重新登录!" : "您还未登录,请登录后操作!");
                // alert(token ? "登录状态已过期,请重新登录!" : "您还未登录,请登录后操作!");
            }
            $g.cookie.clearAll();
            var storageKey = $global.config.storageKey;
            localStorage.removeItem(storageKey);
            var url = location.href.split("#")[0] + "#/login?url=" + encodeURIComponent(location.href);
            location.replace(url);
        }
    },
    // 获取当前用户名
    /* getUserName() {
        var up = localStorage.getItem($global.config.storageKey); //获取本地保存的用户名和密码
        if (up) {
            up = up.split($global.config.splitStr);
            return Base64.decode(up[0]);
        } else {
            this.jumpLoginPage();
        }
    }, */
    //API FUNCTION ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
    __sd(url, data, doing = {}, otherConfig = {}, type) {
        //别名转义 ----------------------------------------------------------------
        doing.s && (doing.success = doing.s); //精简别名
        doing.f && (doing.fail = doing.f); //精简别名
        doing.e && (doing.error = doing.e); //精简别名
        typeof doing.l === "string" ? this.loading(doing.l, url) : (doing.l && (doing.loading = doing.l)); //精简别名[加载]
        // ----------------------------------------------------------------
        var token = $g.cookie.get("token"); //获取token
        //noAutoToken=true代表该接口无需保持登录状态就可以获取信息,譬如一些公共对外开放的接口
        if (!otherConfig.noAutoToken) {
            data || (data = {});
            if (token) {
                data["Blade-Auth"] = "bearer   " + token;
            } else {
                doing.loading && doing.loading.close(); //关闭加载
                // 如果本地没有token
                if (location.href.includes("/login")) {
 
                } else {
                    //判断如果不是在登录页,且本地没有token或者token里面没有用户名和密码,则直接跳转到登录页面
                    return this.jumpLoginPage();
                }
            }
        }
        // ----------------------------------------------------------------
        var headers = {
            "Content-Type": data["Content-Type"] || "application/x-www-form-urlencoded",
            "Authorization": `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`//所有页面都要Authorization
        };
        data["Blade-Auth"] && (headers["Blade-Auth"] = data["Blade-Auth"]);
        if (data) {
            var contentType = data["Content-Type"];
 
            delete data["Content-Type"];
            delete data["Authorization"];
            delete data["Blade-Auth"];
            if (location.href.includes("/login")) {
                $g.cookie.clearAll();
            }
            if (contentType === "application/json") {
                data = JSON.stringify(data);
            }
        }
 
        doing.loading && doing.loading.show && doing.loading.show(); //显示加载动画
        $.ajax({
            timeout: 10 * 60 * 1000, //设置默认超时时间10分钟
            type: type || "POST",
            url,
            data,
            headers,
            success: d => {
                doing.loading && doing.loading.close(); //关闭加载
                this.hideLoading(url); //关闭加载
                switch (d.code) {
                    case 200: //登录成功 ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤
                        d.data && d.data.accessToken && (token = d.data.accessToken); //更新token
                        $g.cookie.setByMinute("token", token, 60); //存储到本地60分钟的保存时间
                        doing.success && doing.success(otherConfig.isGetAllData ? d : (d.data || d));
                        break;
                    case 401: //token失效 ☠ ☠ ☠ ☠
                        this.jumpLoginPage();
                        doing.fail && doing.fail(d);
                        break;
                    case -1: //请求失败 ✖ ✖ ✖ ✖
                    default: //请求失败 ✖ ✖ ✖ ✖
                        doing.fail ? doing.fail(d) : Message.error(d.msg);
                        console.log("【报错】" + JSON.stringify(d, null, 4));
                        break;
                }
            },
            error: d => { //请求报错 ✖ ✖ ✖ ✖
                doing.loading && doing.loading.close(); //关闭加载
                this.hideLoading(url); //关闭加载
                doing.error ? doing.error(d) : this.errorTip("后端逻辑", d, url);
                console.log("【报错】" + JSON.stringify(d, null, 4));
            }
        });
    },
 
    //❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
    //登录接口
    login(data, doing) {
        this.__sd(API_ROOT_URL + "/login/token", data, doing, {noAutoToken: true});
    },
 
    // 例子************************************************
    demo(data = {}, doing) {
        data["Content-Type"] = "application/json";
        this.__sd(API_ROOT_URL + "/api-data/query ", data, doing, {}, "post");
    }, 
    // ----------------------------------------
};

使用demo

//精简模式----------------------------------------
var d = { id: 1 };
 this.$d.API(d, {
 //l: { show: () => (this.loading = true), close: () => (this.loading = false), },
 s: (d) => {
 console.log("【成功】", d);
 } 
});
 
 
 
//一般模式----------------------------------------
var d = { param: "参数值", pageNum: 0 };
 this.$d.API_NAME(d, {
 l: "加载中…",
 //l: { show: () => (this.loading = true), close: () => (this.loading = false),  },
 s: (d) => {
 console.log("【成功】", d);
 } 
 //,f:d=> this.$message.error(d.msg),
 });


相关文章
|
22天前
【sd.js】凯哥版(逐步废弃、逐渐日落2024.01.02)
【sd.js】凯哥版(逐步废弃、逐渐日落2024.01.02)
|
2月前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
16 0
springboot从控制器请求至页面时js失效的解决方法
|
2月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
42 0
|
2月前
|
JavaScript
JS封装节流函数
JS封装节流函数
15 0
|
2月前
uni-app 65egg.js聊天类chat.js封装(二)
uni-app 65egg.js聊天类chat.js封装(二)
27 1
|
2月前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
16 0
|
3月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
28 0
|
2天前
|
SQL 存储 前端开发
React&Nest.js全栈社区平台(五)——👋封装通用分页Service实现文章流与详情
React&Nest.js全栈社区平台(五)——👋封装通用分页Service实现文章流与详情
React&Nest.js全栈社区平台(五)——👋封装通用分页Service实现文章流与详情
|
2月前
|
缓存 JavaScript 前端开发
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
18 1
|
2月前
|
数据采集 JavaScript 前端开发
利用axios库在Node.js中进行代理请求的实践
利用axios库在Node.js中进行代理请求的实践