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


相关文章
|
1天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
|
20天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
82 1
前端JS发起的请求能暂停吗?
|
2天前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
8 2
|
2天前
|
JavaScript
js函数封装 —— 金额添加千分位分隔符
js函数封装 —— 金额添加千分位分隔符
9 2
|
9天前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。
【6月更文挑战第25天】JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。闭包基于作用域链和垃圾回收机制,允许函数记住其定义时的环境。例如,`createCounter`函数返回的内部函数能访问并更新`count`,每次调用`counter()`计数器递增,展示了闭包维持状态的特性。
25 5
|
20天前
|
JavaScript
Node.js GET/POST请求
Node.js GET/POST请求
11 1
前后端数据交互,request.js文件添加拦截器的写法,数据请求失败后的固定写法
前后端数据交互,request.js文件添加拦截器的写法,数据请求失败后的固定写法
|
1天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
2 0
|
2天前
|
前端开发 JavaScript 开发者
前端 JS 经典:通用性函数封装思路
前端 JS 经典:通用性函数封装思路
11 0
|
2天前
|
前端开发 JavaScript
前端 JS 经典:封装全屏功能
前端 JS 经典:封装全屏功能
4 0