js callback hell alternative solution attempt

Keywords: Javascript Attribute github

For example, to obtain the information of the school where the students are, you need to first query the class where the students are, and then query the information of the school where the students are. js code is similar to the following:

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);
                        }
                    });
                }
            });
        }
    });
}
 
//Call entry method
window.οnlοad= function(){
	getStudentSchool(1);
};

Write a class to bind the trigger method by setting the relevant traffic semaphore. When the signal variable changes, the corresponding method will be called automatically. The improvement method is as follows:

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);
        }
    });
}
//Call entry method
window.onload= function(){
    param.studentId =1;
    getStudent();
};

Flag is a semaphore setting object, s.setFlag(flag, "canGetClass", getClass); set flag to have the canGetClass attribute, and the attribute binds to the function getClass. When the first ajax gets data, set the signal and change the semaphore to trigger the binding getClass function, the flag object will automatically create the canGetClass,

canGetClass, two attributes and a canGetClass Fu method are used to call canGetClass Fu = getClass when the canGetClass changes.

The above code can be tested in practice.

Code uploaded to GitHub https://github.com/SaFaJim/AsynFlag
--------
Copyright notice: This is the original article of CSDN blogger "skin prawn great Xia", following CC 4.0 BY-SA copyright agreement. Please attach the original source link and this notice for reprint.
Original link: https://blog.csdn.net/Asa_Jim/article/details/86648199

Posted by kazuki on Fri, 06 Dec 2019 09:16:47 -0800