Untuk yang sudah malang melintang menggunakan jQuery untuk melakukan pembatan halaman web frontend pasti sudah pasti mengerti menggunakan beberapa fungsi ajax call dari jQuery.

Fungsi ajaxcall seperti $.ajax, $.get, $.getJSON, $.post, etc mungkin sudah jadi makan sehari-hari. Tetapi apakah Anda nyaman menggunakannya?
Terus terang sesuatu yang sangat menyebalkan(paling tidak untuk saya) adalah terjadinya nested callback. Contohnya:

$.post(someUrl, {somedata : val}, function(json){
  $.getJSON( someAnotherURL, { somedataAGAIN : json.resultDataFromPreviousCall }, function(json){
    // call satu selesai
    $.post( someAnotherCallAgain, { somedata : json.anotherData }, function(jsonAgain){
      // call kedua selesai
    },'json' )
  } );
},'json');

Saya sering mengalami iterasi seperti ini sampai berulang ulang hingga indent ke kana semakin jauh ke dalam. Cara ini merupakan cara paling lama, yaitu callback.

Cara kedua walau sduah lama saya baru tahu sebutannya. Namanya Promise. Dalam jQuery kita bisa menggunakan tambahan “done” setelah melakukan request. Contohnya:

let ajaxResult = $.getJSON(apiURL, { }, function(){}).done( function(ajaxResult) {
    // request 1 selesai
    // lakukan proses ....... 
    console.log("Request pertama selesai disini: " , ajaxResult);
    return $.getJSON ( apiURL1, {  }, function() { } )
} ). done(function(ajaxResult1){
    // request kedua selesai
    console.log("Request kedua", ajaxResult1);
});

Nah cara ini masih … agak mendingan … tapi bagaimana apabila kita perlu memanggil ajax call lain tetapi tidak selalu dipanggil(optional)? Lagi-lagi bakal buat rumit code kita.

Nah Cara terakhir ini adalah cara terbaru. Cara ini hanya disupport oleh browser terbaru (Mozilla Firefox, Chrome, Opera, Microsoft Edge, dan lain-lain) sehingga Internet Explorer secara otomatis tidak mendukung cara ini.
Cara ini sebutannya adalah Async/Await. Kebetulan saya mempelajari Angular 4 akhir-akhir ini dimana Angular menggunakan Observable, Promise dan yang terakhir adalah Async/Await. Lalu saya sedikit penasaran apabila jQuery mengimplementasi Promise, berarti seharusnya jQuery bisa menggunakan pendekatan terakhir ini, karena pada dasarnya Async/Await merupakan pengembangan dari promise.

Pendekatan terakhir ini, akan menganggap Asynchronous AJAX request seperti layaknya Synchronous proses biasa. Sehingga nesting, dan chaining tidak diperlukan lagi. Berikut adalah contohnya:

async function loadData(){
    let apiURL = "https://jsonplaceholder.typicode.com/posts/2";
    console.log("will request data ... ");
    let ajaxResult = await $.get(apiURL, {}, function(){}, 'json').then();
    console.log("Load data finished, result data: ", ajaxResult);
};
loadData();

Dalam implementasi cara ini, Amda harus membungkus semua proses dalam sebuah function yang di awalnya diberi tambahan “async” kemudian di sebelum request AJAX dimulai, ditambahkan tambahan “await” dengan demikian browser akan menunggu sampai request selesai baru dia melanjutkan ke perintah berikutnya.

Apabila Anda mencoba memanggil function lainnya yang menggunakan async/await, sebelum kita memanggil function tersebut kita juga perlu menambahkan awalan “await” apabila tidak, eksekusi tidak akan menunggu sampai jax call di dalam function tersebut selesai di eksekusi.