js 回呼地獄的另類解決方案嘗試

例如 通過學生獲取學生所在學校資訊，需要先查詢學生所在班級，再通過班級查詢所在學校資訊，js代碼類似寫法如下:

function getStudentSchool(id) {
    ajax.get("/Test/GetStudent", { "studentId": id }, function (student) {
        if (student != null && student.ClassId != null) {
            ajax.get("/Test/GetClass", { "classId": student.ClassId }, function (studentClass) {
                if (studentClass != null && studentClass.SchoolId != null) {
                    ajax.get("/Test/GetSchool", { "schoolId": studentClass.SchoolId }, function (school) {
                        if (school != null) {
                            console.log(school);
                        }
                    });
                }
            });
        }
    });
}
 
//呼叫入口方法
window.οnlοad= function(){
	getStudentSchool(1);
};

　　寫了個類通過設定相關業務信號量來系結觸發的方法，當信號變數改變時就會自動呼叫相應的方法，改進方法如下:

function AsynFlag() {
    if (typeof this.setFlag != "function") {
        AsynFlag.prototype.setFlag = function (obj, name, fun) {
            if (obj.hasOwnProperty(name)) {
                obj[name + "_fun"] = fun;
                return;
            }
            obj[name] = 0;
            obj[name + "_"] = 0;
            Object.defineProperty(obj, name, {
                get: function () {
                    return obj[name + "_"];
                },
                set: function (value) {
                    if (value != obj[name + "_"]) {
                        obj[name + "_"] = value;
                    }
                    else
                    {
                        return;
                    }
                    if (obj[name + "_fun"] == null) {
                        obj[name + "_fun"] = fun;
                    }
                    obj[name + "_fun"]();
                }
            });
        };
    }
}
 
var param = { "studentId": 0, "classId": 0, "schoolId": 0 };
var s = new AsynFlag();
var flag = {};
 
function getStudent()
{
    ajax.get("/Test/GetStudent", { "studentId": param.studentId }, function (student) {
        if (student != null && student.ClassId != null) {
            param.classId = student.ClassId;
            s.setFlag(flag, "canGetClass", getClass);
            flag.canGetClass = true;
        } 
    });
}
 
function getClass()
{
    ajax.get("/Test/GetClass", { "classId": param.ClassId }, function (studentClass) {
        if (studentClass != null && studentClass.SchoolId != null) {
            param.SchoolId  = studentClass.SchoolId;
            s.setFlag(flag, "canGetSchool", getSchool);
            flag.canGetSchool = true;
        }
    });
}
 
function getSchool()
{
    ajax.get("/Test/GetSchool", { "schoolId": param.SchoolId }, function (school) {
        if (school != null) {
            console.log(school);
        }
    });
}
//呼叫入口方法
window.onload= function(){
    param.studentId =1;
    getStudent();
};

flag 是個信號量設定物件，s.setFlag(flag, "canGetClass", getClass); 設定flag擁有canGetClass屬性，并且該屬性系結函式getClass,  當第一個ajax獲得資料后設定信號并改變信號量觸發系結的getClass函式，flag物件中會自動創建canGetClass,

canGetClass_, 兩個屬性和一個canGetClass_fun方法來實作當canGetClass改變時呼叫canGetClass_fun=getClass，

以上代碼實際測驗可行，

代碼已上傳github https://github.com/SaFaJim/AsynFlag
————————————————
著作權宣告：本文為CSDN博主「皮皮蝦大俠」的原創文章，遵循 CC 4.0 BY-SA 著作權協議，轉載請附上原文出處鏈接及本宣告，
原文鏈接：https://blog.csdn.net/Asa_Jim/article/details/86648199

標籤：JavaScript

上一篇：JavaScript的函式申明、函式運算式、箭頭函式

下一篇：axios統一介面管理及優化