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:
Kami akan meneroka teknik ini menggunakan Storyblok Content Delivery API dan menerangkan cara mengendalikan semua faktor ini dalam JavaScript menggunakan fetch. Mari selami kod.
Sebelum menyelami kod, berikut ialah beberapa ciri utama API Storyblok untuk dipertimbangkan:
Begini cara saya melaksanakan konsep ini menggunakan fungsi pengambilan asli dalam JavaScript.
Pertimbangkan bahawa:
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}`);
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.
Dalam artikel ini, Kami membincangkan pertimbangan utama apabila menggunakan API dalam JavaScript menggunakan fungsi pengambilan asli. Saya cuba mengendalikan:
Dengan menggunakan teknik ini, anda boleh mengendalikan penggunaan API dengan cara yang boleh skala, cekap dan selamat memori.
Sila tinggalkan komen/maklum balas anda.
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!
Perbezaan antara vivox100s dan x100
Apakah fungsi informix yang biasa digunakan?
pelayar Ethereum pertanyaan mata wang digital
Apa itu dompet Bitcoin
Proses khusus untuk menyambung ke wifi dalam sistem win7
Apakah kegunaan imej buruh pelabuhan?
Bagaimana untuk memasang sistem linux
Apakah kaedah penghasilan penghasilan animasi html5?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
