Cara menggunakan A-SYNC pada JavaScript

Tentang Kami

Kawan Koding adalah media informasi, berita dan tempat belajar pemrograman secara online yang disajikan dalam format yang menarik dan mudah dipahami.

Artikel ini bagian ke [part not set] dari total 3 artikel di seri Belajar Javascript

• Javascript Async/Await
• Javascript Promise
• Belajar Javascript : Apa Itu Javascript

Assalamualaikum Warahmatullahi Wabarakatuh.

Halo teman-teman yang tidak pernah lelah untuk menambah ilmunya. Sebelumnya kita sudah membahas tentang Promise. Apa? Belum baca? yaudah yuk baca dulu tentang Javascript Promise.

kali ini kita akan membahas tentang Async/Await dan juga contoh penerapan sederhananya. Yaudah yuk langsung kita bahas saja tentang Javascript Async/Await.

Apa Itu Async/Await?

Async/Await merupakan sebuah syntax khusus yang digunakan untuk bekerja dengan Promise agar lebih nyaman dan mudah untuk digunakan. Async/Await terbagi menjadi Async dan Await.

Async sendiri merupakan sebuah fungsi yang mengembalikan sebuah Promise. Await sendiri merupakan fungsi yang hanya berjalan di dalam Async. Await bertujuan untuk menunda jalannya Async hingga proses dari Await tersebut berhasil dieksekusi.

Bingung ya? Yaudah langsung saja kita coba penerapannya pada pembuatan program.

Bagaimana Cara Menggunakan Async/Await?

Dalam penggunaan Async/Await, kita pertama-tama akan membuat function Async nya terlebih dahulu terlebih dahulu. Berikut merupakan bentuk code dari pembuatan function Async tersebut.

async function myAsync [] {
    // Isi dari function yang akan dibuat
}

Sekarang kita akan menuliskan isi dari function tersebut. Kita akan membuat promise di dalamnya. Jika di materi Promiseuntuk mengakses sebuah Promise kita memerlukan method then, pada penggunaan Async, kita cukup menggunakan Await dan Await akan mengembalikan nilai dari Promise. Bentuk penggunaan dari Await dapat dicek dibawah.

async function myAsync [] {
    let p = new Promise[[resolve, reject] => {
        setTimeout[[] => resolve["Hello World!"], 2000]
    }];

    let result = await p;
    alert[result];
}

myAsync[];

Code diatas merupakan penggunaan sederhana dari Async/Await pada Javascript. Berikut merupakan contoh lain dari penerapan Async/Await.

async function gitAsync [name] {
    let github = await fetch[`//api.github.com/users/${name}`];

    let githubUser = await github.json[];
    let githubImgUrl = githubUser.avatar_url;

    window.open[githubImgUrl]
}

gitAsync["denoland"]

Diatas merupakan contoh penggunaan Async/Await disertai pengambilan data melalui API yang ada di github.

Kita telah membahas Async/Await pada Javascript disertai dengan contoh penggunaan sederhananya. Bagi kalian yang tertarik untuk mempelajari lebih dalam tentang Async/Await dapat mengklik link ini. Bagi kalian yang masih belum paham soal Promise, kalian bisa mengunjungi artikel Promise yang ada di website Kawan Koding dengan membuka link ini.

Jika terdapat salah kata atau terdapat kekurangan dari pembahasan ini penulis mohon maaf. Semoga materi ini dapat bermanfaat bagi para pembacanya dan sampai jumpa di pembahasan Javascript selanjutnya.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Misalkan Anda memelihara perpustakaan yang memperlihatkan fungsi getData. Pengguna Anda menyebutnya untuk mendapatkan data aktual:
var output = getData[];
Di bawah tenda data disimpan dalam file sehingga Anda menerapkan getData menggunakan Node.js built-in fs.readFileSync. Jelas getData dan fs.readFileSync adalah fungsi sinkronisasi. Suatu hari Anda diminta untuk mengalihkan sumber data yang mendasarinya ke repo seperti MongoDB yang hanya dapat diakses secara tidak sinkron. Anda juga diminta untuk tidak membuat marah para pengguna Anda, getData API tidak dapat diubah untuk mengembalikan hanya janji atau permintaan parameter panggilan balik. Bagaimana Anda memenuhi kedua persyaratan tersebut?

Fungsi asinkron menggunakan callback/janji adalah DNA dari JavasSript dan Node.js. Semua aplikasi JS non-sepele mungkin diserap dengan gaya pengkodean ini. Tetapi praktik ini dapat dengan mudah menyebabkan piramida panggilan balik Doom. Lebih buruk lagi, jika ada kode dalam pemanggil dalam rantai panggilan tergantung pada hasil dari fungsi async, kode tersebut harus dibungkus dengan fungsi panggilan balik juga, memaksakan batasan gaya pengkodean pada pemanggil. Dari waktu ke waktu saya menemukan kebutuhan untuk merangkum fungsi async [sering disediakan di perpustakaan pihak ke-3] ke dalam fungsi sinkronisasi untuk menghindari re-factoring global besar-besaran. Mencari solusi pada subjek ini biasanya berakhir dengan Node Fibers atau paket npm yang berasal darinya. Tapi Serat tidak bisa menyelesaikan masalah yang saya hadapi. Bahkan contoh yang diberikan oleh penulis Fibers menggambarkan kekurangan:

...
Fiber[function[] {
    console.log['wait... ' + new Date];
    sleep[1000];
    console.log['ok... ' + new Date];
}].run[];
console.log['back in main'];

Output aktual:

wait... Fri Jan 21 2011 22:42:04 GMT+0900 [JST]
back in main
ok... Fri Jan 21 2011 22:42:05 GMT+0900 [JST]

Jika fungsi Fiber benar-benar mengubah fungsi async tidur menjadi sinkron, outputnya harus:

wait... Fri Jan 21 2011 22:42:04 GMT+0900 [JST]
ok... Fri Jan 21 2011 22:42:05 GMT+0900 [JST]
back in main

Saya telah membuat contoh sederhana lain di JSFiddle dan mencari kode untuk menghasilkan output yang diharapkan. Saya akan menerima solusi yang hanya berfungsi di Node.js sehingga Anda bebas untuk meminta paket npm meskipun tidak bekerja di JSFiddle.

deasync mengubah fungsi async menjadi sinkronisasi, diimplementasikan dengan mekanisme pemblokiran dengan memanggil loop peristiwa Node.js pada lapisan JavaScript. Akibatnya, deasync hanya memblokir kode selanjutnya dari berjalan tanpa memblokir seluruh utas, atau membuat menunggu sibuk. Dengan modul ini, inilah jawaban untuk tantangan jsFiddle:

function AnticipatedSyncFunction[]{
  var ret;
  setTimeout[function[]{
      ret = "hello";
  },3000];
  while[ret === undefined] {
    require['deasync'].runLoopOnce[];
  }
  return ret;    
}


var output = AnticipatedSyncFunction[];
//expected: output=hello [after waiting for 3 sec]
console.log["output="+output];
//actual: output=hello [after waiting for 3 sec]

[Penafian: Saya adalah rekan penulis deasync. Modul ini dibuat setelah memposting pertanyaan ini dan tidak menemukan proposal yang bisa diterapkan.]

Ada juga modul sinkronisasi npm. yang digunakan untuk menyinkronkan proses mengeksekusi kueri.

Ketika Anda ingin menjalankan kueri paralel dengan cara sinkron, maka node membatasi untuk melakukannya karena tidak pernah menunggu respons. dan modul sinkronisasi jauh lebih sempurna untuk solusi semacam itu.

Kode sampel

/*require sync module*/
var Sync = require['sync'];
    app.get['/',function[req,res,next]{
      story.find[].exec[function[err,data]{
        var sync_function_data = find_user.sync[null, {name: "sanjeev"}];
          res.send[{story:data,user:sync_function_data}];
        }];
    }];


    /*****sync function defined here *******/
    function find_user[req_json, callback] {
        process.nextTick[function [] {

            users.find[req_json,function [err,data]
            {
                if [!err] {
                    callback[null, data];
                } else {
                    callback[null, err];
                }
            }];
        }];
    }

tautan referensi: //www.npmjs.com/package/sync

Jika fungsi Fiber benar-benar mengubah fungsi async tidur menjadi sinkron

Iya. Di dalam serat, fungsi menunggu sebelum masuk ok. Serat tidak membuat fungsi async sinkron, tetapi memungkinkan untuk menulis kode yang tampak sinkron yang menggunakan fungsi async dan kemudian akan berjalan secara asinkron di dalam Fiber.

Dari waktu ke waktu saya menemukan kebutuhan untuk merangkum fungsi async menjadi fungsi sinkronisasi untuk menghindari re-factoring global besar-besaran.

Kamu tidak bisa. Tidak mungkin membuat kode asinkron menjadi sinkron. Anda harus mengantisipasi hal itu dalam kode global Anda, dan menulisnya dengan gaya async dari awal. Apakah Anda membungkus kode global dalam serat, menggunakan janji, generator janji, atau panggilan balik sederhana tergantung pada preferensi Anda.

Tujuan saya adalah untuk meminimalkan dampak pada pemanggil ketika metode akuisisi data diubah dari sinkronisasi ke async

Baik janji maupun serat bisa melakukan itu.

Anda harus menggunakan janji:

const asyncOperation = [] => {
    return new Promise[[resolve, reject] => {
        setTimeout[[]=>{resolve["hi"]}, 3000]
    }]
}

const asyncFunction = async [] => {
    return await asyncOperation[];
}

const topDog = [] => {
    asyncFunction[].then[[res] => {
        console.log[res];
    }];
}

Saya lebih suka definisi fungsi panah. Tetapi string apa pun dari bentuk "[] => {...}" juga dapat ditulis sebagai "function [] {...}"

Jadi topDog bukan async meskipun memanggil fungsi async.

EDIT: Saya menyadari banyak kali Anda harus membungkus fungsi async di dalam fungsi sinkronisasi di dalam controller. Untuk situasi itu, inilah trik pesta:

const getDemSweetDataz = [req, res] => {
    [async [] => {
        try{
            res.status[200].json[
                await asyncOperation[]
            ];
        }
        catch[e]{
            res.status[500].json[serviceResponse]; //or whatever
        }
    }][] //So we defined and immediately called this async function.
}

Memanfaatkan ini dengan callback, Anda dapat melakukan bungkus yang tidak menggunakan janji:

const asyncOperation = [] => {
    return new Promise[[resolve, reject] => {
        setTimeout[[]=>{resolve["hi"]}, 3000]
    }]
}

const asyncFunction = async [callback] => {
    let res = await asyncOperation[];
    callback[res];
}

const topDog = [] => {
    let callback = [res] => {
        console.log[res];
    };

    [async [] => {
        await asyncFunction[callback]
    }][]
}

Dengan menerapkan trik ini ke EventEmitter, Anda bisa mendapatkan hasil yang sama. Tentukan pendengar EventEmitter di mana saya telah menetapkan panggilan balik, dan keluarkan peristiwa di mana saya menelepon panggilan balik.

Membuat sinkronisasi kode Node.js sangat penting dalam beberapa aspek seperti database. Tetapi keunggulan Node.js sebenarnya terletak pada kode async. Karena ini adalah utas tunggal non-pemblokiran.

kita dapat menyinkronkannya menggunakan fungsionalitas penting Fiber [] Gunakan await [] dan defer [] kita sebut semua metode menggunakan await []. lalu ganti fungsi panggilan balik dengan defer [].

Kode Async Normal. Ini menggunakan fungsi CallBack.

function add [var a, var b, function[err,res]{
       console.log[res];
}];

 function sub [var res2, var b, function[err,res1]{
           console.log[res];
    }];

 function div [var res2, var b, function[err,res3]{
           console.log[res3];
    }];

Sinkronkan kode di atas menggunakan Fiber [], await [] dan defer []

fiber[function[]{
     var obj1 = await[function add[var a, var b,defer[]]];
     var obj2 = await[function sub[var obj1, var b, defer[]]];
     var obj3 = await[function sub[var obj2, var b, defer[]]];

}];

Saya harap ini akan membantu. Terima kasih

Saya tidak dapat menemukan skenario yang tidak dapat diselesaikan menggunakan simpul-serat. Contoh yang Anda berikan menggunakan simpul-serat berperilaku seperti yang diharapkan. Kuncinya adalah menjalankan semua kode yang relevan di dalam serat, jadi Anda tidak harus memulai serat baru dalam posisi acak.

Mari kita lihat contoh: Katakanlah Anda menggunakan beberapa kerangka kerja, yang merupakan titik masuk aplikasi Anda [Anda tidak dapat memodifikasi kerangka kerja ini]. Kerangka kerja ini memuat modul simpuljs sebagai plugin, dan memanggil beberapa metode pada plugin. Katakanlah kerangka kerja ini hanya menerima fungsi sinkron, dan tidak menggunakan serat dengan sendirinya.

Ada pustaka yang ingin Anda gunakan di salah satu plugin Anda, tetapi pustaka ini async, dan Anda juga tidak ingin memodifikasinya.

Utas utama tidak dapat dihasilkan ketika tidak ada serat yang berjalan, tetapi Anda masih bisa membuat plugin menggunakan serat! Cukup buat entri pembungkus yang memulai seluruh kerangka kerja di dalam serat, sehingga Anda bisa menghasilkan eksekusi dari plugin.

Kelemahan: Jika kerangka kerja menggunakan setTimeout atau Promises secara internal, maka ia akan keluar dari konteks fiber. Ini dapat dikerjakan dengan mengejek setTimeout, Promise.then, dan semua penangan acara.

Jadi ini adalah bagaimana Anda bisa menghasilkan serat sampai Promise terselesaikan. Kode ini mengambil fungsi async [Returning kembali] dan melanjutkan serat ketika janji terselesaikan:

framework-entry.js

console.log[require["./my-plugin"].run[]];

async-lib.js

exports.getValueAsync = [] => {
  return new Promise[resolve => {
    setTimeout[[] => {
      resolve["Async Value"];
    }, 100];
  }];
};

my-plugin.js

const Fiber = require["fibers"];

function fiberWaitFor[promiseOrValue] {
  var fiber = Fiber.current, error, value;
  Promise.resolve[promiseOrValue].then[v => {
    error = false;
    value = v;
    fiber.run[];
  }, e => {
    error = true;
    value = e;
    fiber.run[];
  }];
  Fiber.yield[];
  if [error] {
    throw value;
  } else {
    return value;
  }
}

const asyncLib = require["./async-lib"];

exports.run = [] => {
  return fiberWaitFor[asyncLib.getValueAsync[]];
};

my-entry.js

require["fibers"][[] => {
  require["./framework-entry"];
}].run[];

Ketika Anda menjalankan node framework-entry.js itu akan menimbulkan kesalahan: Error: yield[] called with no fiber running. Jika Anda menjalankan node my-entry.js itu berfungsi seperti yang diharapkan.

Anda tidak harus melihat apa yang terjadi sekitar panggilan yang menciptakan serat tetapi pada apa yang terjadi di dalam serat. Setelah Anda berada di dalam serat, Anda dapat memprogram dalam gaya sinkronisasi. Sebagai contoh:

 function f1 [] {
 console.log ['tunggu ...' + Tanggal baru]; 
 sleep [1000]; 
 console.log [' ok ... '+ Date baru]; 
} 
 
 berfungsi f2 [] {
 f1 []; 
 f1 []; 
} 
 
 Serat [fungsi [] {
 F2 []; 
}]. Run []; 

Di dalam serat yang Anda sebut f1, f2 dan sleep seolah-olah mereka disinkronkan.

Dalam aplikasi web biasa, Anda akan membuat Fibre di dispatcher permintaan HTTP Anda. Setelah selesai, Anda dapat menulis semua permintaan Anda yang menangani logika dengan gaya sinkronisasi, bahkan jika itu memanggil fungsi-fungsi async [fs, database, dll.].

Kapan kita menggunakan asynchronous?

Apa itu Synchronous JavaScript?

Apa itu Await di JS?

Apakah yang dimaksud dengan asynchronous api?