Teknik JavaScript yang owerful untuk operasi serentak yang cekap

Terokai buku Amazon saya dan ikuti halaman sederhana saya untuk lebih banyak pandangan. Sokongan anda sangat dihargai!

Menguasai operasi serentak adalah penting untuk pembangunan JavaScript moden. Artikel ini meneroka tujuh teknik yang kuat untuk meningkatkan kecekapan dan responsif kod anda.

1. untuk pelaksanaan serentak: Promise.all() Kaedah ini unggul apabila pelbagai tugas asynchronous mesti diselesaikan sebelum meneruskan. Ia sesuai untuk mengambil data secara serentak dari pelbagai API:

<code class="language-javascript">const fetchUserData = async () => {
  const [profile, posts, friends] = await Promise.all([
    fetch('/api/profile'),
    fetch('/api/posts'),
    fetch('/api/friends')
  ]);

  const userData = {
    profile: await profile.json(),
    posts: await posts.json(),
    friends: await friends.json()
  };

  return userData;
};</code>

Contoh ini serentak mengambil profil, catatan, dan data rakan, menunggu semua untuk menyelesaikan sebelum diproses.

2. untuk pengendalian ralat yang mantap: Promise.allSettled() Sama seperti , tetapi mengendalikan kedua -dua janji yang dipenuhi dan ditolak, memberikan status dan hasil/alasan bagi setiap: Promise.all()

<code class="language-javascript">const attemptOperations = async () => {
  const results = await Promise.allSettled([
    fetch('/api/operation1'),
    fetch('/api/operation2'),
    fetch('/api/operation3')
  ]);

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`Operation ${index + 1} succeeded:`, result.value);
    } else {
      console.log(`Operation ${index + 1} failed:`, result.reason);
    }
  });
};</code>

Ini membolehkan pengendalian individu operasi yang berjaya dan gagal, meningkatkan pengurusan ralat.

3. Async iterators untuk pemprosesan data asynchronous berurutan: Ini sesuai untuk mengendalikan dataset atau aliran yang besar, memprosesnya dalam ketulan yang boleh diurus:

<code class="language-javascript">async function* readFileChunks(file, chunkSize = 64 * 1024) {
  const reader = file.stream().getReader();
  let { done, value } = await reader.read();
  while (!done) {
    yield value;
    ({ done, value } = await reader.read());
  }
}

async function processFile(file) {
  for await (const chunk of readFileChunks(file)) {
    // Process each chunk
    console.log('Processing chunk:', chunk.length, 'bytes');
  }
}</code>

Ini menghalang penyemak imbas dengan memproses fail besar sedikit demi sedikit.

4. Pekerja web untuk mengimbangi tugas-tugas intensif CPU: mewakilkan tugas-tugas yang mahal untuk benang latar belakang, mengekalkan respons UI:

<code class="language-javascript">// Main script
const worker = new Worker('worker.js');
worker.postMessage({ data: complexData });
worker.onmessage = function(event) {
  console.log('Processed result:', event.data);
};

// worker.js
self.onmessage = function(event) {
  const result = performComplexCalculation(event.data);
  self.postMessage(result);
};</code>

Ini menyimpan benang utama percuma untuk interaksi pengguna.

5. untuk membatalkan operasi tak segerak: AbortController bersih membatalkan operasi berterusan, seperti permintaan rangkaian, apabila tidak lagi diperlukan:

<code class="language-javascript">const controller = new AbortController();
const signal = controller.signal;

fetch('/api/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', err);
    }
  });

controller.abort(); // Cancel the fetch</code>

Ini menghalang sumber yang terbuang dan meningkatkan kecekapan.

6. Generator untuk Menguruskan Aliran Asynchronous Kompleks: Buat fungsi yang boleh dijalankan untuk mengawal urutan asynchronous kompleks:

<code class="language-javascript">function* taskQueue() {
  const tasks = [];
  while (true) {
    const task = yield;
    if (task) {
      tasks.push(task);
    } else {
      if (tasks.length > 0) {
        yield tasks.shift()();
      }
    }
  }
}

// ... (rest of the generator example)</code>

Ini menyediakan kawalan berstruktur ke atas operasi tak segerak.

7. Penjana Async untuk melelehkan aliran data asynchronous: Campurkan penjana dan untuk lelaran tak segerak yang fleksibel: async/await

<code class="language-javascript">async function* fetchPages(baseUrl) {
  let page = 1;
  while (true) {
    const response = await fetch(`${baseUrl}?page=${page}`);
    if (!response.ok) break;
    yield await response.json();
    page++;
  }
}

// ... (rest of the async generator example)</code>

Ini sesuai untuk mengendalikan API paginated atau data streaming lain.

memilih teknik yang betul bergantung kepada keperluan khusus projek anda. Dengan menguasai kaedah ini, anda dapat meningkatkan prestasi dan pengalaman pengguna JavaScript anda dengan ketara. Landskap JavaScript sentiasa berkembang; Pembelajaran berterusan adalah kunci untuk terus maju.

---

101 buku

101 Buku, yang diasaskan oleh Aarav Joshi, menggunakan AI untuk membuat buku berkualiti berpatutan. Cari buku Kod Bersih Golang kami di Amazon. Cari Aarav Joshi untuk lebih banyak tajuk dan diskaun khas!

ciptaan kami

Pusat Pelabur | Pelabur Central Spanish | Pelabur Pusat Jerman | Hidup pintar | Epochs & Echoes | Misteri yang membingungkan | Hindutva | Elite Dev | JS Schools

---

Kami berada di Sederhana

Tech Koala Insights | Epochs & Echoes World | Medium Pusat Pelabur | Medium Misteri Medium | Sains & Epochs Medium | Hindutva moden

Atas ialah kandungan terperinci Teknik JavaScript yang owerful untuk operasi serentak yang cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!