Fungsi asinkron: membuat promise lebih ramah

Fungsi asinkron memungkinkan Anda menulis kode berbasis promise seolah-olah kode tersebut merupakan kode sinkron.

Jake Archibald

Fungsi asinkron diaktifkan secara default di Chrome, Edge, Firefox, dan Safari, dan fungsi ini benar-benar luar biasa. Fungsi ini memungkinkan Anda menulis kode berbasis promise seolah-olah kode tersebut sinkron, tetapi tanpa memblokir thread utama. Hal ini membuat kode asinkron Anda menjadi kurang "pintar" dan lebih mudah dibaca.

Fungsi asinkron berfungsi seperti ini:

async function myFirstAsyncFunction() {
  try {
    const fulfilledValue = await promise;
  } catch (rejectedValue) {
    // …
  }
}

Jika menggunakan kata kunci async sebelum definisi fungsi, Anda dapat menggunakan await dalam fungsi. Saat Anda await promise, fungsi akan dijeda dengan cara yang tidak memblokir hingga promise selesai. Jika promise terpenuhi, Anda akan mendapatkan nilai kembali. Jika promise ditolak, nilai yang ditolak akan ditampilkan.

Dukungan browser

Contoh: mencatat pengambilan

Misalnya, Anda ingin mengambil URL dan mencatat responsnya sebagai teks. Berikut tampilannya menggunakan promise:

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

Dan berikut adalah hal yang sama menggunakan fungsi asinkron:

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

Jumlah barisnya sama, tetapi semua callback hilang. Hal ini membuat kode lebih mudah dibaca, terutama bagi mereka yang kurang memahami promise.

Nilai yang ditampilkan asinkron

Fungsi asinkron selalu menampilkan promise, baik Anda menggunakan await maupun tidak. Promise tersebut akan diselesaikan dengan apa pun yang ditampilkan fungsi asinkron, atau ditolak dengan apa pun yang ditampilkan fungsi asinkron. Jadi, dengan:

// wait ms milliseconds
function wait(ms) {
  return new Promise((r) => setTimeout(r, ms));
}

async function hello() {
  await wait(500);
  return 'world';
}

…memanggil hello() akan menampilkan promise yang memenuhi dengan "world".

async function foo() {
  await wait(500);
  throw Error('bar');
}

…memanggil foo() akan menampilkan promise yang rejects dengan Error('bar').

Contoh: melakukan streaming respons

Manfaat fungsi asinkron meningkat dalam contoh yang lebih kompleks. Misalnya, Anda ingin menstreaming respons saat logout dari chunk, dan menampilkan ukuran akhir.

Berikut ini dengan promise:

function getResponseSize(url) {
  return fetch(url).then((response) => {
    const reader = response.body.getReader();
    let total = 0;

    return reader.read().then(function processResult(result) {
      if (result.done) return total