async dan janji dijelaskan dalam JS

nota: semua konsep disambungkan jadi untuk mengetahui satu perkara anda perlu memahami konsep lain juga

kod sekatan

katakan anda mempunyai gelung dalam program anda yang mengambil masa bertahun-tahun untuk disiapkan. Kini anda Mempunyai dua pilihan sama ada teruskan atau tunggu. Jika anda memilih untuk menunggu maka ia akan dianggap menyekat kod. Jika tidak maka anda tiada pilihan?. mari lihat.

//blocking code
let sum = 0;
for(let i = 1;i<Number.MAX_SAFE_INTEGER;i++){
  for(let j = 1;j<Number.MAX_SAFE_INTEGER;j++){
      sum = i+j;
}
}
console.log(sum);
// above program is dummy and does not serve any purpose

sekarang seperti yang anda lihat kerana tidak akan membiarkan program yang dijalankan di bawahnya sebelum ia selesai. Sekarang jumlah untuk dijalankan kita perlu menunggu selama bertahun-tahun dan pengguna mungkin terlepas beberapa perkara penting (fungsi lain).

Untuk memintas situasi sedemikian, kami boleh meletakkan dan console.log(sum) ke beberapa fail yang boleh dijalankan selari dengan kod kami dan tunggu sehingga kami memberikannya isyarat hijau. Ini dipanggil async. Kod async dijalankan selari dengan kod utama dan hanya berjalan selepas kod utama selesai.

Jika kod async mempunyai kod async lain di dalamnya. Ia tidak akan berjalan sehingga bahagian luar selesai.

masalah kerja rumah

apakah output program di bawah ?

• setInterval ialah fungsi JS terbina untuk menjalankan program dalam selang waktu.

// will inner ever run ? if yes then why (ask gemini/gpt)
setInterval(()=>{
  console.log("outer");
  setInterval(()=>{
    console.log("inner");
  },1000)
},1000)

kod tidak menyekat

setTimeout(()=>{
   console.log("outer");
   setTimeout(()=>{
     console.log("inner");
     for(let i = 1;i<1000;i++){}
     console.log("inner finished");
   },0)
   console.log("outer finishes");
},0)
console.log("i will run first");

output

i will run first
outer
outer finishes
inner
inner finished

nota: Daripada kod di atas, anda boleh peranti blok luar itu kini bertindak sebagai kod utama manakala dalam sebagai kod async.

anda lihat walaupun console.log("saya akan jalankan dahulu") ditulis selepas kod utama ia dijalankan dahulu. bagaimana? ini dipanggil kod tidak menyekat atau async. Ia tidak menghalang fungsi utama program anda. Biarkan anda melakukan operasi mengambil masa dalam aplikasi anda seperti menulis dan membaca.

async-menunggu

tunggu kata kunci sentiasa dibalut dengan fungsi async dan tidak akan membenarkan kod lain di bawahnya menjadi eksekutif sehingga ia selesai. Async dan tunggu adalah pasangan kunci. Seperkara lagi, tunggu sentiasa diletakkan sebelum fungsi yang mengembalikan janji dan sentiasa membungkusnya dalam blok try catch.

async function myPromise(){
 try{
  await doSomething(); // a function that return promise
  console.log("Your file is successfully created"); //only runs when promise is accepted
  }
  catch(err){
   console.log(err); // if promised is rejected;
  }
}
myPromise();
console.log("first");

output

# consider promise to be successful
first
Your file is successfully created

Pemahaman sehingga kini (kesimpulan):

1. Fungsi mengembalikan janji yang sentiasa dibalut dengan async-wait.
2. async-await berjalan seiring.
3. Sentiasa balut tunggu di blok cuba-tangkap. (rujuk blog saya jika tidak)
4. Kini program di luar fungsi async akan sentiasa berjalan tanpa mengira ia diselesaikan atau ditolak seperti yang ditunjukkan di atas. (itukah keindahannya?)
5. sekarang mari faham janji

sekarang mari kita mulakan dengan permohonan janji

1. Permintaan API - Bawa data daripada pelayan lain
2. Operasi Fail - membaca dan menulis fail
3. Pertanyaan pangkalan data - mengambil atau menulis data

adakah anda menemui sesuatu yang biasa dalam semua kes penggunaan?

ya semua permohonan mengambil masa untuk dilaksanakan.

Janji memberi kita kuasa besar untuk menangani situasi sedemikian dengan secukupnya. Sekali lagi Janji dan async-wait berjalan seiring.

Janji mempunyai 3 keadaan (seperti yang ditunjukkan dalam contoh di atas)

• diselesaikan (jika ya maka fail kami berjaya dibuat akan berjalan)
• ditolak (kod dalam blok tangkapan akan dijalankan)
• belum selesai (ia akan menunggu dan tidak akan membenarkan sebarang kod dijalankan di dalam fungsi)

mari buat janji tersuai dalam JS

Kata kunci async di luar fungsi yang mengembalikan janji adalah pilihan semata-mata. Lihat kod di bawah...

fetchData

// trying to mimic as a server response
function fetchData(success=false){
  return new Promise((resolve,reject)=>{
    if(success){
      setTimeout(()=>{
        resolve("fetched successfully");
      },5000) // execute after 5 sec
    }
    else
    reject("server is not responding");
  })
}
// lets consider fetchData is in-built function

utama

/* lets consider fetchData is a in-built function that gets data from other server. We are passing success para to just mimic the server otherwise it does not serve any purpose here.
*/
async function getData(){
  try{
    let result = await fetchData(true);
    console.log(result) //fetched successfully
  }
  catch(err){
    console.log(err); // in case of rejection
  }
}
getData();
// load other code

Kod lain juga akan dijalankan tanpa mengira data yang diambil atau tidak. Ia meningkatkan prestasi dan meningkatkan kualiti kod kami.

rujukan

ralat-pengendalian-oleh-aryan

Atas ialah kandungan terperinci async dan janji dijelaskan dalam JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!