Penggunaan API yang cekap untuk data yang besar dalam JavaScript

Apabila bekerja dengan API yang mengendalikan set data yang besar, adalah penting untuk mengurus aliran data dengan cekap dan menangani cabaran seperti penomboran, had kadar dan penggunaan memori. Dalam artikel ini, kami akan membincangkan cara menggunakan API menggunakan fungsi pengambilan asli JavaScript. Kita akan melihat topik penting seperti:

• Mengendalikan jumlah data yang besar: mendapatkan semula set data yang besar secara berperingkat untuk mengelakkan sistem anda membebani.
• Penomboran: kebanyakan API, termasuk Storyblok Content Delivery API, mengembalikan data dalam halaman. Kami akan meneroka cara mengurus penomboran untuk mendapatkan semula data yang cekap.
• Had Kadar: API selalunya mengenakan had kadar untuk mengelakkan penyalahgunaan. Kita akan lihat cara untuk mengesan dan mengendalikan had ini.
• Mekanisme Cuba Selepas Semula: jika API bertindak balas dengan kod status 429 (Terlalu Banyak Permintaan), kami akan melaksanakan mekanisme "Cuba Semula Selepas", yang menunjukkan tempoh menunggu sebelum mencuba semula untuk memastikan data lancar mengambil.
• Permintaan Serentak: mengambil berbilang halaman secara selari boleh mempercepatkan proses. Kami akan menggunakan Promise.all() JavaScript untuk menghantar permintaan serentak dan meningkatkan prestasi.
• Mengelakkan Kebocoran Memori: mengendalikan set data yang besar memerlukan pengurusan memori yang teliti. Kami akan memproses data dalam ketulan dan memastikan operasi yang cekap memori, terima kasih kepada penjana.

Kami akan meneroka teknik ini menggunakan Storyblok Content Delivery API dan menerangkan cara mengendalikan semua faktor ini dalam JavaScript menggunakan fetch. Mari selami kod.

Perkara yang perlu diingat apabila menggunakan Storyblok Content Delivery API

Sebelum menyelami kod, berikut ialah beberapa ciri utama API Storyblok untuk dipertimbangkan:

• Parameter CV: parameter cv (Versi Kandungan) mendapatkan semula kandungan cache. Nilai cv dikembalikan dalam permintaan pertama dan harus diserahkan dalam permintaan berikutnya untuk memastikan versi kandungan cache yang sama diambil.
• Penomboran dengan halaman dan setiap halaman: menggunakan parameter halaman dan per_halaman untuk mengawal bilangan item yang dikembalikan dalam setiap permintaan dan untuk mengulang melalui halaman hasil.
• Jumlah Pengepala: Jumlah pengepala respons pertama menunjukkan jumlah bilangan item yang tersedia. Ini penting untuk mengira bilangan halaman data yang perlu diambil.
• Pengendalian 429 (Had Kadar): Storyblok menguatkuasakan had kadar; apabila anda memukulnya, API mengembalikan status 429. Gunakan pengepala Cuba Semula Selepas (atau nilai lalai) untuk mengetahui berapa lama menunggu sebelum mencuba semula permintaan.

Contoh kod JavaScript menggunakan fetch() untuk mengendalikan set data yang besar

Begini cara saya melaksanakan konsep ini menggunakan fungsi pengambilan asli dalam JavaScript.
Pertimbangkan bahawa:

• Coretan ini mencipta fail baharu bernama stories.json sebagai contoh. Jika fail sudah wujud, ia akan ditimpa. Jadi, jika anda mempunyai fail dengan nama itu sudah berada dalam direktori kerja, tukar nama dalam coretan kod.
• kerana permintaan dilaksanakan secara selari, susunan cerita tidak dijamin. Contohnya, jika respons untuk halaman ketiga lebih cepat daripada respons permintaan kedua, penjana akan menyampaikan cerita halaman ketiga sebelum cerita halaman kedua.
• Saya menguji coretan dengan Bun :)

import { writeFile, appendFile } from "fs/promises";

// Read access token from Environment
const STORYBLOK_ACCESS_TOKEN = process.env.STORYBLOK_ACCESS_TOKEN;
// Read access token from Environment
const STORYBLOK_VERSION = process.env.STORYBLOK_VERSION;

/**
 * Fetch a single page of data from the API,
 * with retry logic for rate limits (HTTP 429).
 */
async function fetchPage(url, page, perPage, cv) {
  let retryCount = 0;
  // Max retry attempts
  const maxRetries = 5;
  while (retryCount <= maxRetries) {
    try {
      const response = await fetch(
        `${url}&page=${page}&per_page=${perPage}&cv=${cv}`,
      );
      // Handle 429 Too Many Requests (Rate Limit)
      if (response.status === 429) {
        // Some APIs provides you the Retry-After in the header
        // Retry After indicates how long to wait before retrying.
        // Storyblok uses a fixed window counter (1 second window)
        const retryAfter = response.headers.get("Retry-After") || 1;
        console.log(response.headers,
          `Rate limited on page ${page}. Retrying after ${retryAfter} seconds...`,
        );
        retryCount++;
        // In the case of rate limit, waiting 1 second is enough.
        // If not we will wait 2 second at the second tentative,
        // in order to progressively slow down the retry requests
        // setTimeout accept millisecond , so we have to use 1000 as multiplier
        await new Promise((resolve) => setTimeout(resolve, retryAfter * 1000 * retryCount));
        continue;
      }

      if (!response.ok) {
        throw new Error(
          `Failed to fetch page ${page}: HTTP ${response.status}`,
        );
      }
      const data = await response.json();
      // Return the stories data of the current page
      return data.stories || [];
    } catch (error) {
      console.error(`Error fetching page ${page}: ${error.message}`);
      return []; // Return an empty array if the request fails to not break the flow
    }
  }
  console.error(`Failed to fetch page ${page} after ${maxRetries} attempts`);
  return []; // If we hit the max retry limit, return an empty array
}

/**
 * Fetch all data in parallel, processing pages in batches
 * as a generators (the reason why we use the `*`)
 */
async function* fetchAllDataInParallel(
  url,
  perPage = 25,
  numOfParallelRequests = 5,
) {

  let currentPage = 1;
  let totalPages = null;

  // Fetch the first page to get:
  // - the total entries (the `total` HTTP header)
  // - the CV for caching (the `cv` atribute in the JSON response payload)
  const firstResponse = await fetch(
    `${url}&page=${currentPage}&per_page=${perPage}`,
  );
  if (!firstResponse.ok) {
    console.log(`${url}&page=${currentPage}&per_page=${perPage}`);
    console.log(firstResponse);
    throw new Error(`Failed to fetch data: HTTP ${firstResponse.status}`);
  }
  console.timeLog("API", "After first response");

  const firstData = await firstResponse.json();
  const total = parseInt(firstResponse.headers.get("total"), 10) || 0;
  totalPages = Math.ceil(total / perPage);

  // Yield the stories from the first page
  for (const story of firstData.stories) {
    yield story;
  }

  const cv = firstData.cv;

  console.log(`Total pages: ${totalPages}`);
  console.log(`CV parameter for caching: ${cv}`);

  currentPage++; // Start from the second page now

  while (currentPage <= totalPages) {
    // Get the list of pages to fetch in the current batch
    const pagesToFetch = [];
    for (
      let i = 0;
      i < numOfParallelRequests && currentPage <= totalPages;
      i++
    ) {
      pagesToFetch.push(currentPage);
      currentPage++;
    }

    // Fetch the pages in parallel
    const batchRequests = pagesToFetch.map((page) =>
      fetchPage(url, page, perPage, firstData, cv),
    );

    // Wait for all requests in the batch to complete
    const batchResults = await Promise.all(batchRequests);
    console.timeLog("API", `Got ${batchResults.length} response`);
    // Yield the stories from each batch of requests
    for (let result of batchResults) {
      for (const story of result) {
        yield story;
      }
    }
    console.log(`Fetched pages: ${pagesToFetch.join(", ")}`);
  }
}

console.time("API");
const apiUrl = `https://api.storyblok.com/v2/cdn/stories?token=${STORYBLOK_ACCESS_TOKEN}&version=${STORYBLOK_VERSION}`;
//const apiUrl = `http://localhost:3000?token=${STORYBLOK_ACCESS_TOKEN}&version=${STORYBLOK_VERSION}`;

const stories = fetchAllDataInParallel(apiUrl, 25,7);

// Create an empty file (or overwrite if it exists) before appending
await writeFile('stories.json', '[', 'utf8'); // Start the JSON array
let i = 0;
for await (const story of stories) {
  i++;
  console.log(story.name);
  // If it's not the first story, add a comma to separate JSON objects
  if (i > 1) {
    await appendFile('stories.json', ',', 'utf8');
  }
  // Append the current story to the file
  await appendFile('stories.json', JSON.stringify(story, null, 2), 'utf8');
}
// Close the JSON array in the file
await appendFile('stories.json', ']', 'utf8'); // End the JSON array
console.log(`Total Stories: ${i}`);

Langkah Utama Diterangkan

Berikut ialah pecahan langkah penting dalam kod yang memastikan penggunaan API yang cekap dan boleh dipercayai menggunakan Storyblok Content Delivery API:

1) Mengambil halaman dengan mekanisme percubaan semula (fetchPage)

Fungsi ini mengendalikan pengambilan satu halaman data daripada API. Ia termasuk logik untuk mencuba semula apabila API bertindak balas dengan status 429 (Terlalu Banyak Permintaan), yang menandakan bahawa had kadar telah melebihi.
Nilai retryAfter menentukan berapa lama menunggu sebelum mencuba semula. Saya menggunakan setTimeout untuk menjeda sebelum membuat permintaan seterusnya dan percubaan semula adalah terhad kepada maksimum 5 percubaan.

2) Permintaan halaman awal dan parameter CV

Permintaan API pertama adalah penting kerana ia mendapatkan semula jumlah pengepala (yang menunjukkan jumlah bilangan cerita) dan parameter cv (digunakan untuk caching).
Anda boleh menggunakan jumlah pengepala untuk mengira jumlah halaman yang diperlukan dan parameter cv memastikan kandungan cache digunakan.

3) Mengendalikan penomboran

Penomboran diurus menggunakan parameter rentetan pertanyaan halaman dan per_halaman. Kod ini meminta 25 cerita setiap halaman (anda boleh melaraskan ini), dan jumlah pengepala membantu mengira bilangan halaman yang perlu diambil.
Kod ini mengambil cerita dalam kelompok sehingga 7 (anda boleh melaraskan ini) permintaan selari pada satu masa untuk meningkatkan prestasi tanpa mengatasi API.

4) Permintaan serentak dengan Promise.all():

Untuk mempercepatkan proses, berbilang halaman diambil secara selari menggunakan Promise.all() JavaScript. Kaedah ini menghantar beberapa permintaan serentak dan menunggu kesemuanya selesai.
Selepas setiap kumpulan permintaan selari selesai, keputusan diproses untuk menghasilkan cerita. Ini mengelakkan memuatkan semua data ke dalam memori sekaligus, mengurangkan penggunaan memori.

5) Pengurusan memori dengan lelaran tak segerak (untuk menunggu...daripada):

Daripada mengumpul semua data ke dalam tatasusunan, kami menggunakan Penjana JavaScript (fungsi* dan untuk menunggu...daripada) untuk memproses setiap cerita semasa ia diambil. Ini menghalang beban memori apabila mengendalikan set data yang besar.
Dengan menghasilkan cerita satu demi satu, kod itu kekal cekap dan mengelakkan kebocoran memori.

6) Pengendalian had kadar:

Jika API bertindak balas dengan kod status 429 (kadar terhad), skrip menggunakan nilai retryAfter. Ia kemudian dijeda untuk masa yang ditentukan sebelum mencuba semula permintaan. Ini memastikan pematuhan terhadap had kadar API dan mengelakkan menghantar terlalu banyak permintaan terlalu cepat.

Kesimpulan

Dalam artikel ini, Kami membincangkan pertimbangan utama apabila menggunakan API dalam JavaScript menggunakan fungsi pengambilan asli. Saya cuba mengendalikan:

• set data besar: mengambil set data besar menggunakan penomboran.
• Penomboran: mengurus penomboran dengan parameter halaman dan per_halaman.
• Had kadar dan mekanisme cuba semula: mengendalikan had kadar dan permintaan mencuba semula selepas kelewatan yang sesuai.
• Permintaan serentak: mengambil halaman secara selari menggunakan Promise.all() JavaScript untuk mempercepatkan pengambilan data.
• Pengurusan memori: menggunakan Penjana JavaScript (fungsi* dan untuk menunggu...untuk) untuk memproses data tanpa menggunakan memori yang berlebihan.

Dengan menggunakan teknik ini, anda boleh mengendalikan penggunaan API dengan cara yang boleh skala, cekap dan selamat memori.

Sila tinggalkan komen/maklum balas anda.

Rujukan

• Penjana JavaScript
• Bun masa jalan JavaScript
• API Penyampaian Kandungan Storyblok

Atas ialah kandungan terperinci Penggunaan API yang cekap untuk data yang besar dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!