Secuencias en JavaScript

A veces tenemos la necesidad de querer hacer peticiones a el servidor de manera secuencial(conjunto de elementos que se ordenan en una determinada sucesión,esto es, uno detrás de otros o unos delante de otros, guardando una relación entre sí.).
Esto lo podríamos hacer usando funciones de callback en JavaScript, pero ¿que pasaría si quisiéramos ejecutar una petición a el servidor hasta cuando se terminen las demás de ejecutarse?, para esto tenemos la siguiente función en JavaScript.

Lo primero que tenemos que hacer es copiar el siguiente código 

Sequence = function () {
    this.func = null;
    this.ss = [];
    var me = this;
    this.reset = function () {
        me.ss = [];
        me.func && (
                delete me.func
                );
    };
    this.set = function (func, arg) {
        me.ss.push({
            'func': func,
            'arg': arg
        });
    };
    this.next = function () {
        return me.commit();
    };
    this.finish = function () {
        me.ss = [];
        return me.commit();
    };
    this.commit = function (func, rev_) {
        func && (me.func = func);
        rev_ && me.ss.reverse();
        var sq = null;
        if (me.ss.length) {
            sq = me.ss.shift();
            sq.func(sq.arg);
        } else {
            me.func && me.func();
        }
        return sq ? true : false;
    };
};

y pegarlo en un nuevo archivo con el nombre que mas nos acomode, en este ejemplo le pondré secuencia.js. Después mandarlo a llamar en el head del html.

<script type='text/javascript' src='secuencia.js'></script>

Para instanciar nuestra función utilizaremos:

var seq = new Sequence();

Ahora nos crearemos unas funciones con callback para nuestro ejemplo.

function funcion1(parameter, callBack) {
	$.ajax({
       url : '/ruta-service1/',
       type : "post",
       data : {
        message : "Mensaje"
       },
        success : function(json) {
        	callBack(0);
        },
         error : function(xhr,errmsg,err) {
            callBack(1);
         }
    });
}

function funcion2(parameter, callBack) {
	$.ajax({
       url : '/ruta-service2/',
       type : "post",
       data : {
        message : "Mensaje"
       },
        success : function(json) {
        	callBack(0);
        },
         error : function(xhr,errmsg,err) {
            callBack(1);
         }
    });
}

function funcion3(parameter, callBack) {
	$.ajax({
       url : '/ruta-service3/',
       type : "post",
       data : {
        message : "Mensaje"
       },
        success : function(json) {
        	callBack(0);
        },
         error : function(xhr,errmsg,err) {
            callBack(1);
         }
    });
}

Una vez creadas nuestras funciones como pruebas, iniciamos con el proceso de implementación.

En donde crearemos nuestras funciones que tendrán un identificador para poder llevar la secuencia de las peticiones,  estas pueden ir de el numero “0” hasta donde se requiera. Para este ejemplo usaremos solo tres, ya que se crearon 3 funciones como pruebas e iniciando desde el 0.

seq.set(function () {
	funcion1(parameter,function (e) {
		if (e == 0) {
			seq.next();
		} else {
			seq.finish();
		}
	});
}, 0);

seq.set(function () {
	funcion2(parameter,function (e) {
		if (e == 0) {
			seq.next();
		} else {
			seq.finish();
		}
	});
}, 1);

seq.set(function () {
	funcion3(parameter,function (e) {
		if (e == 0) {
			seq.next();
		} else {
			seq.finish();
		}
	});
}, 2);

Cada instancia de la función "set", tiene dos instancias más:

La primera es:

seq.next();

Que lo que hace es ir a la siguiente secuencia cuando ya concluyo la primera, es decir cuando el callback respondió con código 0. Esto se repite por cada función que se cree.

La segunda es:

seq.finish();

Que lo que hace es finalizar el proceso de secuencia si algo sale mal, cuando el servicio responde con código 1.
Y por último se usa la función commit, para enviar todo las peticiones ya con la secuencia cargada.

seq.commit(function () {
});


 
Elder López Félix

Elder López Félix

Backend Developer | Python / Django - Javascript / AngularJs / Angular - 5

@Elderl23

0 Comentarios

Error message here!

Error message here!

Hide Error message here!

¿Perdiste tu contraseña? Por favor, introduzca su dirección de correo electrónico. Recibirás un enlace para crear una nueva contraseña.

Error message here!

Back to log-in

Close