Belajar JavaScript Async/Await Dalam 10 Menit – Untuk waktu yang lama, pengembang JavaScript harus mengandalkan callback untuk menangani kode asinkron. Akibatnya, banyak dari kita mengalami callback hell, dan ketika dihadapkan dengan fungsi seperti itu, kita mengalami horor.

Belajar JavaScript Async Await Dalam 10 Menit
Source : freecodecamp

Untungnya, kemudian (atau kita harus mengatakan .then ())muncul Promises. Mereka memberikan alternatif yang lebih terstruktur untuk callback, dan sebagian besar komunitas dengan cepat beralih ke callback. Sekarang, dengan tambahan Async / Await terbaru, penulisan kode JavaScript akan menjadi lebih baik!

Apa itu Async / Await ?

Async / Await adalah fungsi JavaScript yang telah lama ditunggu-tunggu yang membuat penggunaan fungsi asinkron lebih menyenangkan dan mudah dipahami. Itu dibuat di Promises dan kompatibel dengan semua API berbasis Promise yang ada.

Namanya berasal dari async dan await -dua kata kunci ini akan membantu kami membersihkan kode asinkron :

Asynchronous-menyatakan fungsi asynchronous (async function someName(){...}).

  • Secara otomatis mengubah fungsi biasa menjadi Janji.
  • Saat fungsi asynchronous dipanggil, nilai yang dikembalikan dalam tubuhnya akan digunakan untuk analisis.
  • Fungsi asynchronous memungkinkan penggunaan await.

Await – Jeda pelaksanaan fungsi asinkron. (var result = await someAsyncCall();).

  • Ketika ditempatkan sebelum panggilan Promise, await memaksa sisa kode untuk menunggu hingga Promise selesai dan mengembalikan hasilnya.
  • Await hanya berlaku untuk Promises, bukan untuk callback.
  • Await hanya dapat digunakan dalam fungsi async.

Ini contoh sederhananya, javascriptoo harap ini mudah untuk dipahami :

Misalkan kita ingin mendapatkan beberapa file JSON dari server. Kami akan menulis fungsi yang menggunakan pustaka axios dan mengirimkan permintaan HTTP GET ke https://blogkamu/misc/files/example.json. Kita harus menunggu server merespons, jadi permintaan HTTP ini secara alami tidak sinkron.

Baca Juga : 5 Teknologi Flexbox Yang Perlu Anda Ketahui

Di bawah ini kita dapat melihat bahwa fungsi yang sama diimplementasikan dua kali. Gunakan Promises terlebih dahulu, lalu Async / Await.

// Promise approach

function getJSON(){

    // To make the function blocking we manually create a Promise.
    return new Promise( function(resolve) {
        axios.get('https://tutorialzine.com/misc/files/example.json')
            .then( function(json) {

                // The data from the request is available in a .then block
                // We return the result using resolve.
                resolve(json);
            });
    });

}

// Async/Await approach

// The async keyword will automatically create a new Promise and return it.
async function getJSONAsync(){

    // The await keyword saves us from having to write a .then() block.
    let json = await axios.get('https://tutorialzine.com/misc/files/example.json');

    // The result of the GET request is available in the json variable.
    // We return it just like in a regular synchronous function.
    return json;
}

Jelas, versi kode Async / Await lebih pendek dan lebih mudah dibaca. Kecuali untuk sintaks yang digunakan, kedua fungsi ini identik-keduanya mengembalikan Promises dan menggunakan respons JSON axios untuk penguraian. Kita dapat memanggil fungsi asynchronous seperti ini:

getJSONAsync().then( function(result) {
    // Do something with result.
});

Jadi, apakah Async / Await mengembalikan Promises obsolete ?

tidak semuanya. Saat menggunakan async / await, kami masih menggunakan Promises di latar belakang. Dalam jangka panjang, pemahaman yang baik tentang Promise akan benar-benar membantu Anda, dan Anda sangat disarankan untuk melakukan ini.

Bahkan dalam beberapa kasus, Async / Await tidak akan memotongnya, kami harus kembali ke Promises untuk mendapatkan bantuan. Salah satu situasi tersebut adalah ketika kita perlu membuat beberapa panggilan asinkron independen dan menunggu semua panggilan asinkron ini selesai.

Jika kami mencoba melakukan operasi ini menggunakan async dan await, hal berikut akan terjadi:

async function getABC() {
  let A = await getValueA(); // getValueA takes 2 second to finish
  let B = await getValueB(); // getValueB takes 4 second to finish
  let C = await getValueC(); // getValueC takes 3 second to finish

  return A*B*C;
}

Setiap panggilan tunggu akan menunggu hasil pengembalian sebelumnya. Karena kami hanya memanggil satu telepon pada satu waktu, seluruh fungsi membutuhkan waktu 9 detik (2 + 4 + 3) dari awal hingga akhir.

Ini bukan solusi terbaik karena ketiga variabel A, B dan C tidak bergantung satu sama lain. Dengan kata lain, kita tidak perlu mengetahui nilai A sebelum kita mendapatkan B. Kami bisa mendapatkannya pada waktu yang sama, menghemat waktu Anda untuk menunggu beberapa detik.

Untuk mengirim semua permintaan pada saat yang sama, Promise.all() diperlukan. Ini akan memastikan bahwa kami masih mendapatkan semua hasil sebelum melanjutkan, tetapi panggilan asinkron akan dipicu secara paralel, bukan satu demi satu.

async function getABC() {
  // Promise.all() allows us to send all requests at the same time. 
  let results = await Promise.all([ getValueA, getValueB, getValueC ]); 

  return results.reduce((total,value) => total * value);
}

Dengan cara ini, fungsinya akan memakan waktu lebih sedikit. Di akhir getValueB, panggilan getValueA dan getValueC akan diselesaikan. Daripada total waktu, kami akan secara efektif mengurangi eksekusi ke waktu permintaan paling lambat (getValueB-4 detik).

Menangani Kesalahan Async/Await

Keuntungan lain dari Async / Await adalah memungkinkan kita untuk menangkap kesalahan tak terduga dalam blok coba / tangkap lama yang bagus. Kita hanya perlu membungkus panggilan await sebagai berikut:

async function doSomethingAsync(){
    try {
        // This async call may fail.
        let result = await someAsyncCall();
    }
    catch(error) {
        // If it does we will catch the error here.
    }  
}

Klausa catch akan menangani kesalahan yang disebabkan oleh panggilan asinkron yang ditunggu atau kode kegagalan lain yang mungkin kita tulis di blok percobaan.

Baca Juga : 17 Tips Untuk Menulis CSS Modern

Jika situasinya mengharuskan, kami juga dapat menemukan kesalahan saat menjalankan fungsi asinkron. Karena semua fungsi asynchronous menghasilkan Promises, Anda cukup menyertakan event handler .catch() saat memanggilnya.

// Async function without a try/catch block.
async function doSomethingAsync(){
    // This async call may fail.
    let result = await someAsyncCall();
    return result;  
}

// We catch the error upon calling the function.
doSomethingAsync().
    .then(successHandler)
    .catch(errorHandler);

Yang penting adalah memilih metode penanganan kesalahan yang Anda suka dan ikuti. Menggunakan try / catch dan .catch () bersama-sama dapat menyebabkan masalah.

Browser Support

Sebagian besar browser utama sudah menyediakan Async / Await. Ini hanya mengecualikan IE11-semua vendor lain tidak memerlukan pustaka eksternal untuk mengenali kode async / await Anda.

caniuse-async-await
Source : tutorialzine.com

Selama pengembang node menggunakan Node 8 atau lebih tinggi, mereka dapat menikmati proses asinkron yang ditingkatkan. Ini harus menjadi LTS akhir tahun ini.

Jika kompatibilitas ini tidak memenuhi kebutuhan Anda, maka ada penerjemah JS seperti Babel dan TypeScript, dan asyncawait library Node.js, yang menyediakan fungsi versi lintas platform mereka sendiri.

Kesimpulannya

Dengan tambahan Async / Await, bahasa JavaScript telah membuat lompatan besar dalam keterbacaan kode dan kemudahan penggunaan. Pemula JavaScript dan pembuat kode berpengalaman akan menghargai kemampuan untuk menulis kode asinkron yang mirip dengan fungsi sinkron biasa.