使用處理大型資料集的 API 時，有效管理資料流並解決分頁、速率限制和記憶體使用等挑戰至關重要。在本文中，我們將介紹如何使用 JavaScript 的本機 fetch 函數來使用 API。我們將看到重要的主題，例如：
-
處理大量資料：增量檢索大型資料集以避免系統不堪負荷。
-
分頁：大多數 API（包括 Storyblok Content Delivery API）以頁面形式傳回資料。我們將探索如何管理分頁以實現高效的資料檢索。
-
速率限制：API 通常會施加速率限制以防止濫用。我們將了解如何檢測和處理這些限制。
-
Retry-After機制：如果API回應429狀態碼（請求過多），我們將實作「Retry-After」機制，指示重試之前需要等待多長時間，以確保資料流暢正在取得。
-
並發請求：並行取得多個頁面可以加快進程。我們將使用 JavaScript 的 Promise.all() 發送並發請求並提高效能。
-
避免記憶體洩漏：處理大型資料集需要仔細的記憶體管理。借助生成器。
，我們將分塊處理資料並確保記憶體高效操作
我們將使用 Storyblok Content Delivery API 來探索這些技術，並解釋如何使用 fetch 在 JavaScript 中處理所有這些因素。讓我們深入研究程式碼。
使用 Storyblok Content Delivery API 時要記住的事項
在深入研究程式碼之前，請先考慮以下 Storyblok API 的一些關鍵功能：
-
CV 參數：cv（內容版本）參數檢索快取的內容。 cv 值在第一個請求中返回，並應在後續請求中傳遞，以確保獲取內容的相同快取版本。
-
分頁和每頁分頁：使用 page 和 per_page 參數來控制每個請求中傳回的項目數並迭代結果頁面。
-
總標題：第一個回應的總標題指示可用項目的總數。這對於計算需要獲取多少數據頁至關重要。
-
處理 429（速率限制）：Storyblok 強制執行速率限制；當您點擊它們時，API 會傳回 429 狀態。使用 Retry-After 標頭（或預設值）了解重試請求之前需要等待多久。
使用 fetch() 處理大型資料集的 JavaScript 範例程式碼
以下是我如何使用 JavaScript 中的本機 fetch 函數來實現這些概念。
考慮一下：
- 此程式碼片段建立一個名為 Stories.json 的新檔案作為範例。如果該檔案已經存在，它將被覆蓋。因此，如果工作目錄中已有具有該名稱的文件，請更改程式碼片段中的名稱。
- 由於請求是並行執行的，因此無法保證故事的順序。例如，如果第三頁的回應比第二個請求的回應快，則生成器將在第二頁的故事之前傳送第三頁的故事。
- 我用 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}`);
登入後複製
關鍵步驟說明
以下是程式碼中關鍵步驟的細分，可確保使用 Storyblok Content Delivery API 實現高效且可靠的 API 使用：
1) 使用重試機制取得頁面(fetchPage)
此函數處理從 API 取得單頁資料。它包括當 API 回應 429（請求過多）狀態時重試的邏輯，這表示已超出速率限制。
retryAfter 值指定在重試之前等待的時間。我在發出後續請求之前使用 setTimeout 暫停，並且重試次數最多限制為 5 次。
2) 初始頁請求與 CV 參數
第一個 API 請求至關重要，因為它會檢索總標頭（指示故事總數）和 cv 參數（用於快取）。
您可以使用total header來計算所需的總頁數，cv參數確保使用快取的內容。
3) 處理分頁
分頁是使用 page 和 per_page 查詢字串參數來管理的。程式碼請求每頁 25 個故事（您可以調整此值），總標題有助於計算需要取得的頁面數。
該程式碼一次最多可批量獲取 7 個（您可以調整此）並行請求的故事，以提高效能，而不會壓垮 API。
4) 使用 Promise.all() 的並發請求:
為了加快流程，使用 JavaScript 的 Promise.all() 並行取得多個頁面。此方法同時發送多個請求並等待所有請求完成。
每批並行請求完成後，將處理結果以產生故事。這樣可以避免一次將所有資料載入到記憶體中，從而減少記憶體消耗。
5) 非同步迭代的記憶體管理（用於await...of）:
我們沒有將所有資料收集到數組中，而是使用 JavaScript 生成器（function* 和 wait...of）來處理獲取的每個故事。這可以防止處理大型資料集時出現記憶體過載。
透過一一產生故事，程式碼保持高效並避免記憶體洩漏。
6) 速率限制處理:
如果 API 以 429 狀態代碼（速率受限）回應，則腳本使用 retryAfter 值。然後，它會暫停指定的時間，然後重試請求。這可確保符合 API 速率限制並避免過快發送過多請求。
結論
在本文中，我們介紹了使用本機 fetch 函數在 JavaScript 中使用 API 時的關鍵注意事項。我嘗試處理：
-
大型資料集：使用分頁取得大型資料集。
-
分頁：使用 page 和 per_page 參數管理分頁。
-
速率限制和重試機制：處理速率限制並在適當的延遲後重試請求。
-
並發請求：使用 JavaScript 的 Promise.all() 並行取得頁面，以加快資料擷取速度。
-
記憶體管理：使用JavaScript產生器（function*和await...of）來處理資料而不消耗過多的記憶體。
透過應用這些技術，您可以以可擴展、高效且記憶體安全的方式處理 API 消耗。
請隨時發表您的評論/回饋。
參考
- JavaScript 生成器
- 建置 JavaScript 執行時期
- Storyblok 內容傳遞 API
以上是JavaScript 中海量資料的高效能 API 消耗的詳細內容。更多資訊請關注PHP中文網其他相關文章！
