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),
 });


相关文章
|
2月前
|
前端开发 数据安全/隐私保护
crypto-js中AES的加解密封装
文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。
209 1
crypto-js中AES的加解密封装
|
23天前
|
JavaScript
Node.js GET/POST请求
10月更文挑战第6天
33 2
Node.js GET/POST请求
|
27天前
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
37 4
|
2月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
124 8
|
2月前
|
JSON JavaScript 前端开发
js请求后端9
js请求后端9
34 2
|
2月前
|
设计模式 JavaScript
JS发布订阅模式封装(纯手工)
发布订阅模式是JS常用的设计模式,在面试中也会经常遇到,以下是我的手写实现方式,经测试效果不错,小伙伴们们可以直接拷贝使用。
|
3月前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
111 0
Vue项目打包后都产生了哪些JS请求?
|
3月前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转及跳转传参
JavaScript 地址信息与页面跳转及跳转传参
31 1
|
3月前
|
JavaScript Serverless Linux
函数计算产品使用问题之遇到Node.js环境下的请求日志没有正常输出时,该如何排查
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
3月前
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
103 0