Apex · javascript

apex.server.process, AJAX Calls, Promise y Async, Await ejemplo práctico

Hola amigos en este blog veremos cómo hacer llamadas Ajax consecutivas usando apex.server.process , es decir una tras otra.

Iremos de frente a los ejemplos, para ver un poco la teoría dejare algunos enlaces en la parte final, entendamos que ya tenemos un proceso ajax callback definido en nuestra página, en mi caso se llamará apex_ajax_call

Demo

Async / Await


var async_fnc_1 = async function(parameter){
  console.log('sleep for: ' + parameter + ' sec');
  return apex.server.process( "apex_ajax_call", {
    x01: parameter
  }
  , { success: function( data )  {// do something here
      }
  }
  );
}

var async_fnc_2 = async function(parameter){
  console.log('sleep for: ' + parameter + ' sec');
  //throw new Error('Something went wrong.');
  return apex.server.process( "apex_ajax_call", {
    x01: parameter
  }
  , { success: function( data )  {// do something here
          data.xx = 'new param just in case';
          //throw new Error(' custom error');
      }
  }
  );
}

var async_fnc_3 = async function(parameter){
  console.log('sleep for: ' + parameter + ' sec');
  return apex.server.process( "apex_ajax_call", {
    x01: parameter
  }
  , { success: function( data )  {// do something here
      }
  }
  );
}

var fncError = function(dataError){
  console.log('error on promise' + dataError);
}

async function exec_calls(){
  var result1 = await async_fnc_1(2);
  console.log('call 1: ', result1);

  var result2 = await async_fnc_2(5);
  console.log('call 2: ', result2);
  console.log('print custom result: ', result2.xx);

  var result3 = await async_fnc_3(3);
  console.log('call 3: ', result3);
}

exec_calls();

ajax_async_await

Promise

var promise_1 = function(parameter){
  console.log('sleep for: ' + parameter + ' sec');
  return apex.server.process( "apex_ajax_call", {
    x01: parameter
  }
  , { success: function( data )  {// do something here
      }
  }
  );
}

var promise_2 = function(parameter){
  console.log('sleep for: ' + parameter + ' sec');
  //throw new Error('Something went wrong.');
  return apex.server.process( "apex_ajax_call", {
    x01: parameter
  }
  , { success: function( data )  {// do something here
          data.xx = 'new param just in case';
          //throw new Error(' custom error');
      }
  }
  );
}

var promise_3 = function(parameter){
  console.log('sleep for: ' + parameter + ' sec');
  return apex.server.process( "apex_ajax_call", {
    x01: parameter
  }
  , { success: function( data )  {// do something here
      }
  }
  );
}

var fncError = function(dataError){
  console.log('error on promise' + dataError);
}

promise_1(3).then(
  function(data){
    console.log('result promise 1 / ',data.message);
    return promise_2(2);
  }
  , fncError
).then(
  function(data){
    console.log('result promise 2 / ',data);
    return promise_3(1);
  }
  , fncError
).then(
  function(data){
    console.log('result promise 3 / ',data.message); 
  }
  , fncError
)

ajax_promise

Definicion del ejemplo

img_ajax_callback

Código PlSql

declare
  l_param       number := apex_application.g_x01;
begin

  DBMS_SESSION.sleep(l_param);

  apex_json.open_object;
  apex_json.write('success',true);
  apex_json.write('message','sleep: ' || l_param || ' at: '|| LOCALTIMESTAMP);
  apex_json.close_object;

exception
  when others then
    apex_json.open_object;
    apex_json.write('success',false);
    apex_json.close_object;
end;

Referencias

2 thoughts on “apex.server.process, AJAX Calls, Promise y Async, Await ejemplo práctico

  1. interesante artículo Angel, gracias.

    En que escenarios reales sería esto de utilidad por ejemplo?

    Por cierto, creo que hay un typo en la opción del menú, dice “Ajx”.

    saludos

    Like

Leave a reply to Angel O. Flores Torres Cancel reply