Apa perbedaan antara janji JavaScript dan async await?

Saya telah menggunakan fitur ECMAScript 6 dan ECMAScript 7 (berkat Babel) di aplikasi saya - baik seluler maupun web.

Langkah pertama yang jelas adalah ECMAScript 6 level. Saya belajar banyak pola async, promise (yang benar-benar menjanjikan), generator (tidak yakin mengapa simbol *), dll. Dari semua ini, promise cukup sesuai untuk tujuan saya. Dan saya sudah cukup sering menggunakannya dalam aplikasi saya.

Berikut adalah contoh / pseudocode tentang bagaimana saya menerapkan janji dasar-

var myPromise = new Promise(
    function (resolve,reject) {
      var x = MyDataStore(myObj);
      resolve(x);
    });

myPromise.then(
  function (x) {
    init(x);
});

Seiring berjalannya waktu, saya menemukan fitur ECMAScript 7, dan salah satunya adalah ASYNCdan AWAITkata kunci / fungsi. Ini dalam hubungannya melakukan keajaiban besar. Saya sudah mulai mengganti beberapa janji saya dengan async & await. Mereka tampaknya memberi nilai tambah yang besar pada gaya pemrograman.

Sekali lagi, berikut adalah pseudocode tentang bagaimana fungsi async, await saya terlihat-

async function myAsyncFunction (myObj) {
    var x = new MyDataStore(myObj);
    return await x.init();
}
var returnVal = await myAsyncFunction(obj);

Mengesampingkan kesalahan sintaks (jika ada), keduanya melakukan hal yang persis sama adalah apa yang saya rasakan. Saya hampir bisa mengganti sebagian besar janji saya dengan async, tunggu.

Mengapa async, menunggu diperlukan saat promise melakukan pekerjaan serupa?

Apakah asinkron, menunggu menyelesaikan masalah yang lebih besar? Atau apakah itu hanya solusi berbeda untuk menelepon balik neraka?

Seperti yang saya katakan sebelumnya, saya dapat menggunakan promise dan async, menunggu untuk menyelesaikan masalah yang sama. Apakah ada hal khusus yang menunggu penyelesaian async?

Catatan tambahan:

Saya telah menggunakan async, menunggu dan janji dalam proyek React dan modul Node.js saya secara ekstensif. React khususnya telah menjadi yang pertama dan mengadopsi banyak fitur ECMAScript 6 dan ECMAScript 7.

Mengapa async, await diperlukan saat Promises melakukan tugas serupa? Apakah asinkron, menunggu menyelesaikan masalah yang lebih besar?

async/awaithanya memberi Anda nuansa sinkron ke kode asinkron. Ini adalah bentuk gula sintaksis yang sangat elegan.

Untuk kueri sederhana dan manipulasi data, Promises bisa jadi sederhana, tetapi jika Anda mengalami skenario di mana ada manipulasi data yang kompleks dan yang tidak terlibat, lebih mudah untuk memahami apa yang terjadi jika kode hanya terlihat seolah-olah sinkron (dengan kata lain, sintaks itu sendiri adalah suatu bentuk "kompleksitas insidental" yang async/awaitdapat disiasati).

Jika Anda tertarik untuk mengetahuinya, Anda dapat menggunakan library like co(bersama generator) untuk memberikan kesan yang sama. Hal-hal seperti ini telah dikembangkan untuk memecahkan masalah yang async/awaitakhirnya terpecahkan (secara native).

Async / Await menyediakan sintaks yang jauh lebih baik dalam skenario yang lebih kompleks. Secara khusus, apa pun yang berhubungan dengan loop atau konstruksi tertentu lainnya seperti try/ catch.

Sebagai contoh:

while (!value) {
  const intermediate = await operation1();
  value = await operation2(intermediate);
}

Contoh ini akan jauh lebih berbelit-belit hanya dengan menggunakan Promises.

Mengapa async, await diperlukan saat Promises melakukan tugas serupa? Apakah asinkron, menunggu menyelesaikan masalah yang lebih besar? atau apakah itu hanya solusi yang berbeda untuk menelepon balik neraka? Seperti yang saya katakan sebelumnya, saya dapat menggunakan Promises dan Async, Menunggu untuk menyelesaikan masalah yang sama. Apakah ada sesuatu yang spesifik yang diselesaikan Async Await?

Hal pertama yang harus Anda pahami bahwa async/ awaitsintaks hanyalah gula sintaksis yang dimaksudkan untuk menambah janji. Faktanya, nilai kembali dari suatu asyncfungsi adalah sebuah janji. async/ awaitsyntax memberi kita kemungkinan untuk menulis asynchronous secara sinkron. Berikut ini contohnya:

Perangkaian janji:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

Async fungsi:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Dalam contoh di atas, awaitmenunggu promise ( fetch(url)) diselesaikan atau ditolak. Jika promise diselesaikan, nilainya disimpan dalam responsevariabel, dan jika promise ditolak, hal itu akan menimbulkan kesalahan dan karenanya memasuki catchblok.

Kita sudah bisa melihat bahwa menggunakan async/ awaitmungkin lebih mudah dibaca daripada rantai janji. Ini terutama benar ketika jumlah janji yang kita gunakan meningkat. Baik rantai janji dan async/ awaitmemecahkan masalah neraka panggilan balik dan metode mana yang Anda pilih adalah masalah preferensi pribadi.

Perbandingan penuh dengan pro dan kontra.

JavaScript biasa

• Pro

• Tidak memerlukan perpustakaan atau teknologi tambahan
• Menawarkan kinerja terbaik
• Memberikan tingkat kompatibilitas terbaik dengan pustaka pihak ketiga
• Memungkinkan pembuatan algoritme ad hoc dan algoritme yang lebih canggih

• Kontra

• Mungkin memerlukan kode tambahan dan algoritme yang relatif kompleks

Asinkron (pustaka)

• Pro

• Menyederhanakan pola aliran kontrol yang paling umum
• Masih merupakan solusi berbasis panggilan balik
• Penampilan yang bagus

• Kontra

• Memperkenalkan ketergantungan eksternal
• Mungkin masih belum cukup untuk aliran lanjutan

Janji

• Pro

• Sangat menyederhanakan pola aliran kontrol yang paling umum
• Penanganan error yang kuat
• Bagian dari spesifikasi ES2015
• Menjamin permintaan yang ditangguhkan dari onFulfilled dan onRejected

• Kontra

• Membutuhkan promisify callback-based APIs
• Memperkenalkan hit kinerja kecil

Generator

• Pro

• Membuat API non-pemblokiran terlihat seperti yang memblokir
• Menyederhanakan penanganan error
• Bagian dari spesifikasi ES2015

• Kontra

• Membutuhkan perpustakaan aliran kontrol komplementer
• Masih membutuhkan callback atau janji untuk mengimplementasikan aliran non-sekuensial
• Memerlukan API berbasis nongenerator thunkify atau promisify

Async menunggu

• Pro

• Menjadikan API non-pemblokiran terlihat seperti memblokir
• Sintaks yang bersih dan intuitif

• Kontra

• Membutuhkan Babel atau transpiler lain dan beberapa konfigurasi untuk digunakan saat ini

Async / await dapat membantu membuat kode Anda lebih bersih dan lebih mudah dibaca jika Anda memerlukan aliran kontrol yang rumit. Ini juga menghasilkan kode yang lebih ramah debug. Dan memungkinkan untuk menangani kesalahan sinkron dan asinkron hanya dengan try/catch.

Saya baru-baru ini menulis posting ini yang menunjukkan keuntungan dari async / await over promise dalam beberapa kasus penggunaan umum dengan contoh kode: 6 Alasan Mengapa JavaScript Async / Await Blows Promises Away (Tutorial)