Pameran Cangkuk Ringan untuk Pengambilan & Cache Data Async dalam React

Hai semua!

Saya telah mengusahakan cangkuk React ringan yang saya panggil useAsync yang meniru beberapa ciri penting React Query (seperti mengambil, menyimpan cache, mencuba semula, dll.) tetapi dalam bentuk yang lebih padat, pakej mudah disesuaikan. Di bawah ialah pecahan pantas tentang cara ia berfungsi secara dalaman, merujuk bahagian kod yang berkaitan. Jika anda ingin melihat keseluruhan kod, pergi ke repo:

Kod Sumber Penuh pada GitHub.
Cangkuk itu juga tersedia pada npm sebagai api-refetch.

---

Mengapa Membuat Cangkuk Saya Sendiri?

Walaupun React Query dan SWR adalah kedua-dua perpustakaan yang hebat, saya mahukan pendekatan yang lebih praktikal atas beberapa sebab:

1. Jejak Ringan
   
   Walaupun React Query dan SWR kaya dengan ciri, ia boleh menjadi agak besar (React Query ~2.2 MB, SWR ~620 kB). api-refetch adalah sekitar 250 kB, menjadikannya sesuai untuk apl yang lebih kecil di mana saiz berkas menjadi kebimbangan besar. Cangkuk ini yang dimaksudkan untuk dipasang sebagai pergantungan perpustakaan lain (Intlayer). Akibatnya, saiz penyelesaian menjadi pertimbangan penting.

2. Mudah Disesuaikan & Dioptimumkan
   Saya memerlukan beberapa keupayaan khusus—seperti menyimpan/mengambil data daripada storan setempat dan mengurus permintaan selari menggunakan pendekatan yang mudah.
   Dengan mengklon repo atau menyalin kod terus ke dalam projek anda, anda boleh menanggalkan sebarang ciri yang tidak diingini dan menyimpan hanya perkara yang anda perlukan. Ini bukan sahaja mengurangkan saiz himpunan tetapi juga meminimumkan pemaparan semula dan peningkatan yang tidak perlu, memberikan anda penyelesaian yang lebih ramping dan lebih berprestasi yang disesuaikan dengan keperluan khusus anda.

3. Tiada Pembekal Diperlukan
   
   Saya ingin mengelakkan Penyedia Konteks untuk menjadikan cangkuk global, dan memastikan penggunaannya semudah mungkin. Jadi saya membuat versi cangkuk berdasarkan kedai Zustand (lihat contoh di bawah).

4. Latihan Belajar
   
   Membina pustaka async dari awal ialah cara terbaik untuk memahami concurrency, caching dan keadaan dalaman pengurusan.

Ringkasnya, melancarkan cangkuk saya sendiri adalah peluang untuk mengasah ciri yang saya perlukan dengan tepat (dan langkau yang saya tidak perlukan) sambil memastikan perpustakaan kecil dan mudah difahami.

Ciri-ciri Dilindungi

Kail React mengurus:

• Pengurusan Pengambilan & Negeri: Mengendalikan keadaan pemuatan, ralat, kejayaan dan pengambilan.
• Caching & Storage: Menyimpan data secara pilihan (melalui keadaan React atau Zustand di bawah hud) dan menawarkan sokongan storan setempat.
• Cuba Semula & Pengesahan Semula: Had cuba semula boleh dikonfigurasikan dan selang pengesahan semula automatik.
• Pengaktifan & Pembatalan: Secara automatik mengaktifkan dan membatalkan pertanyaan bergantung pada pertanyaan atau keadaan lain. Contoh: ambil beberapa data secara automatik apabila pengguna log masuk. Dan batalkannya apabila pengguna log keluar.
• Pengambilan Pelekap Komponen Selari: Menghalang berbilang permintaan serentak untuk sumber yang sama apabila berbilang komponen dipasang serentak.

Bagaimana Kod Berfungsi

Di bawah ialah perkara utama dalam pengambilan semula api dan rujukan ringkas kepada bahagian kod yang berkaitan dalam useAsync.tsx.

1. Mengambil dan Mengendalikan Pemasangan Selari

• Coretan Kod:

  // This map stores any in-progress Promise to avoid sending parallel requests
  // for the same resource across multiple components.
  const pendingPromises = new Map();

  const fetch: T = async (...args) => {
    // Check if a request with the same key + args is already running
    if (pendingPromises.has(keyWithArgs)) {
      return pendingPromises.get(keyWithArgs);
    }

    // Otherwise, store a new Promise and execute
    const promise = (async () => {
      setQueryState(keyWithArgs, { isLoading: true });

      // ...perform fetch here...
    })();

    // Keep it in the map until it resolves or rejects
    pendingPromises.set(keyWithArgs, promise);
    return await promise;
  };

• Penjelasan: Di sini, kami menyimpan sebarang pengambilan berterusan dalam petaPromises yang belum selesai. Apabila dua komponen cuba mengambil sumber yang sama secara serentak (dengan mempunyai keyWithArgs yang sama), komponen kedua hanya menggunakan semula permintaan yang sedang berjalan dan bukannya membuat panggilan rangkaian pendua.

---

2. Pengesahan semula

• Coretan Kod:

  // Handle periodic revalidation if caching is enabled
  useEffect(
    () => {
      if (!revalidationEnabled || revalidateTime <= 0) return; // Revalidation is disabled
      if (!isEnabled || !enabled) return; // Hook is disabled
      if (isLoading) return; // Fetch is already in progress
      if (!isSuccess || !fetchedDateTime) return; // Should retry either of revalidate
      if (!(cacheEnabled || storeEnabled)) return; // Useless to revalidate if caching is disabled

      const timeout = setTimeout(() => {
        fetch(...storedArgsRef.current);
      }, revalidateTime);

      return () => clearTimeout(timeout);
    },
    [
      /* dependencies */
    ]
  );

• Penjelasan: Setiap kali anda mendayakan pengesahan semula, api-refetch menyemak sama ada data cache lebih lama daripada revalidateTime yang ditentukan. Jika ya, data diambil semula secara automatik di latar belakang untuk memastikan UI anda disegerakkan tanpa pencetus manual tambahan.

---

3. Cuba semula Logik

• Coretan Kod:

  useEffect(
    () => {
      const isRetryEnabled = errorCount > 0 && retryLimit > 0;
      const isRetryLimitReached = errorCount > retryLimit;

      if (!isEnabled || !enabled) return; // Hook is disabled
      if (!isRetryEnabled) return; // Retry is disabled
      if (isRetryLimitReached) return; // Retry limit has been reached
      if (!(cacheEnabled || storeEnabled)) return; // Useless to retry if caching is disabled
      if (isLoading) return; // Fetch is already in progress
      if (isSuccess) return; // Hook has already fetched successfully

      const timeout = setTimeout(() => {
        fetch(...storedArgsRef.current);
      }, retryTime);

      return () => clearTimeout(timeout);
    },
    [
      /* dependencies */
    ]
  );

• Penjelasan: Tersilap, cangkuk mengira berapa banyak percubaan yang gagal telah berlaku. Jika ia masih di bawah retryLimit, ia secara automatik menunggu retryTime milisaat sebelum mencuba lagi. Proses ini berterusan sehingga data berjaya diambil atau had cuba semula dicapai.

---

4. Auto-Ambil

• Coretan Kod:

  // Auto-fetch data on hook mount if autoFetch is true
  useEffect(
    () => {
      if (!autoFetch) return; // Auto-fetch is disabled
      if (!isEnabled || !enabled) return; // Hook is disabled
      if (isFetched && !isInvalidated) return; // Hook have already fetched or invalidated
      if (isLoading) return; // Fetch is already in progress

      fetch(...storedArgsRef.current);
    },
    [
      /* dependencies */
    ]
  );

• Penjelasan: Dengan autoFetch ditetapkan kepada benar, cangkuk akan menjalankan fungsi async secara automatik sebaik sahaja komponen dipasang—sempurna untuk senario "fire-and-forget" di mana anda sentiasa mahu data dimuatkan.

---

Lihat Sumber Penuh di GitHub

Lihat kod lengkap, yang termasuk logik storan setempat, ketidaksahihan pertanyaan dan banyak lagi di sini:

• Kod Sumber Penuh

Jangan ragu untuk mencubanya, melaporkan isu atau menyumbang jika anda berminat. Sebarang maklum balas amat dihargai!

Contoh penggunaan

Pemasangan

Salin kod atau kod (repo)[https://github.com/aymericzip/api-refetch]

Atau

  // This map stores any in-progress Promise to avoid sending parallel requests
  // for the same resource across multiple components.
  const pendingPromises = new Map();

  const fetch: T = async (...args) => {
    // Check if a request with the same key + args is already running
    if (pendingPromises.has(keyWithArgs)) {
      return pendingPromises.get(keyWithArgs);
    }

    // Otherwise, store a new Promise and execute
    const promise = (async () => {
      setQueryState(keyWithArgs, { isLoading: true });

      // ...perform fetch here...
    })();

    // Keep it in the map until it resolves or rejects
    pendingPromises.set(keyWithArgs, promise);
    return await promise;
  };

Contoh Pantas

  // Handle periodic revalidation if caching is enabled
  useEffect(
    () => {
      if (!revalidationEnabled || revalidateTime <= 0) return; // Revalidation is disabled
      if (!isEnabled || !enabled) return; // Hook is disabled
      if (isLoading) return; // Fetch is already in progress
      if (!isSuccess || !fetchedDateTime) return; // Should retry either of revalidate
      if (!(cacheEnabled || storeEnabled)) return; // Useless to revalidate if caching is disabled

      const timeout = setTimeout(() => {
        fetch(...storedArgsRef.current);
      }, revalidateTime);

      return () => clearTimeout(timeout);
    },
    [
      /* dependencies */
    ]
  );

---

Itu sahaja! Cubalah, dan beritahu saya bagaimana ia berlaku. Maklum balas, soalan atau sumbangan amat dialu-alukan di GitHub.

GitHub: api-refetch

Selamat pengekodan!

Atas ialah kandungan terperinci Pameran Cangkuk Ringan untuk Pengambilan & Cache Data Async dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!