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

// import $g from "./sg";//vue项目使用
// import $ from 'jquery';//vue项目使用
//(提示：原生开发页面请前往https://jquery.com下载最新版jQuery)
// import { Dialog } from 'vant';//vant项目使用
// import { Message } from 'element-ui';//element项目使用
const API_ROOT_URL = "//api.shuzhiqiang.com/apiPath";//接口正式环境前缀
//一些前提条件和方法________________________________________________________________________________
//跳转到登录页面
const jumpLoginPage = () => {
    $g.cookie.clearAll();//清空所有缓存(需要引入sg.js)
    Object.keys(localStorage).forEach(k => delete localStorage[k]);//清空对象键、值
    location.hash.includes('/login') || location.replace(`${location.href.split('#')[0]}#/login?url=${encodeURIComponent(location.href)}`);
}
// 请求报错提示
const errAlert = (url, d) => sgAlert(`【可能是后端报错】\n\r【接口地址】${url}\n\r【返回报文】${JSON.stringify(d, null, 4)}`);
// 普通报错提示
const sgAlert = (d) => {
    // alert(d);
    // Dialog.alert({message:d, closeOnClickOverlay:true, confirmButtonText: "我知道了"}));
    Message.error(d);
}
const $d = {
    //API FUNCTION ________________________________________________________________________________
    __sd(type, url, data, doing, otherConfig = {}) {
        type || (type = 'POST');
        //noAutoToken=true代表该接口无需保持登录状态就可以获取信息，譬如一些公共对外开放的接口
        let token = $g.cookie.get("token"); //获取token
        if (!otherConfig.noAutoToken) {
            if (!token) return jumpLoginPage();//判断如果本地没有token，否者直接跳转到登录页面
        }
        let headers = { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' };//Form Data方式提交数据
        if (!otherConfig.noAutoToken) {
            token && (headers["kkToken"] || (headers["kkToken"] = token));
            data || (data = {});
        }

        // 防止下载导出文件乱码
        let xhrFields = otherConfig.isDownload ? { xhrFields: { responseType: "arraybuffer" } } : null;

        // 精简别名________________________________________________________________________________
        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,
            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 => {
                doing.loading && doing.loading.close && doing.loading.close(); //关闭加载
                //请求报错（当token密码失效的时候） 
                if (d.status == 403) {
                    jumpLoginPage();
                    return doing.error ? doing.error(d) : sgAlert(JSON.parse(d.responseText).msg);;
                }
                doing.error ? doing.error(d) : errAlert(url, d);
                console.log(`【报错】${JSON.stringify(d, null, 4)}`);
            },
        });
    },

    //【通用接口demo】________________________________________________________________________________
    
    API_name({ data, doing, config }) {
        this.__sd("post", `${API_ROOT_URL}/XXX/XXX/XXX${$g.formatAsUrlParamString(data)}`, data, doing, config);
    },


    //提交用例________________________________________
    get({doing}) {this.__sd("get", `${API_ROOT_URL}/get.do`, null, doing) { isGetAllData: true };},

    post({data, doing}) {this.__sd("post", `${API_ROOT_URL}/post.do`, data, doing);},

    login({data, doing}) {this.__sd("post", `${API_ROOT_URL}/post.do`, data, doing, { noAutoToken: true });},

    download({data, doing}) {this.__sd("post", `${API_ROOT_URL}/post.do`, data, doing, { isDownload: true });},

};

调用方式

let data = { id: 1 };
this.$d.API_NAME({
    data,
    doing: {
        s: d => {
            console.log("【成功】", d);
        }
    }
});

为了高效敏捷开发，写了一个基于上面的接口封装自动生成API请求代码片段的小工具【sgCreateAPI】自定义小工具：敏捷开发→自动化生成API接口脚本（接口代码生成工具）_你挚爱的强哥的博客-CSDN博客【Vue.js最新版】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本_你挚爱的强哥的博客-CSDN博客。【代码】【最新版】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本。生成的接口请求代码是基于。https://blog.csdn.net/qq_37860634/article/details/132709087