대규모 데이터세트를 처리하는 API로 작업할 때는 데이터 흐름을 효율적으로 관리하고 페이지 매김, 속도 제한, 메모리 사용량과 같은 문제를 해결하는 것이 중요합니다. 이 기사에서는 JavaScript의 기본 가져오기 기능을 사용하여 API를 사용하는 방법을 살펴보겠습니다. 다음과 같은 중요한 주제를 살펴보겠습니다.
Storyblok Content Delivery API를 사용하여 이러한 기술을 살펴보고 가져오기를 사용하여 JavaScript에서 이러한 모든 요소를 처리하는 방법을 설명합니다. 코드를 자세히 살펴보겠습니다.
코드를 살펴보기 전에 고려해야 할 Storyblok API의 몇 가지 주요 기능은 다음과 같습니다.
JavaScript의 기본 가져오기 기능을 사용하여 이러한 개념을 구현한 방법은 다음과 같습니다.
다음 사항을 고려하세요.
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 매개변수(캐싱에 사용됨)를 검색하기 때문에 중요합니다.
총 헤더를 사용하여 필요한 총 페이지 수를 계산할 수 있으며, cv 매개변수는 캐시된 콘텐츠가 사용되도록 보장합니다.
3) 페이지 매김 처리
페이지 매김은 페이지 및 페이지별 쿼리 문자열 매개변수를 사용하여 관리됩니다. 코드는 페이지당 25개의 스토리를 요청하며(조정 가능) 총 헤더는 가져와야 하는 페이지 수를 계산하는 데 도움이 됩니다.
코드는 API를 압도하지 않고 성능을 향상시키기 위해 한 번에 최대 7개(조정 가능) 병렬 요청 배치로 스토리를 가져옵니다.
4) Promise.all()을 사용한 동시 요청:
프로세스 속도를 높이기 위해 JavaScript의 Promise.all()을 사용하여 여러 페이지를 병렬로 가져옵니다. 이 메서드는 여러 요청을 동시에 보내고 모든 요청이 완료될 때까지 기다립니다.
병렬 요청의 각 배치가 완료된 후 결과가 처리되어 스토리가 생성됩니다. 이렇게 하면 모든 데이터를 한 번에 메모리에 로드하는 것을 방지하여 메모리 소비를 줄일 수 있습니다.
5) 비동기 반복을 통한 메모리 관리(await...of):
모든 데이터를 배열로 수집하는 대신 JavaScript 생성기(함수* 및 wait...of)를 사용하여 각 스토리를 가져오는 대로 처리합니다. 이는 대규모 데이터 세트를 처리할 때 메모리 과부하를 방지합니다.
스토리를 하나씩 생성함으로써 코드 효율성을 유지하고 메모리 누수를 방지합니다.
6) 비율 제한 처리:
API가 429 상태 코드(속도 제한)로 응답하는 경우 스크립트는 retryAfter 값을 사용합니다. 그런 다음 요청을 재시도하기 전에 지정된 시간 동안 일시 중지됩니다. 이렇게 하면 API 속도 제한을 준수하고 너무 많은 요청을 너무 빨리 보내는 것을 방지할 수 있습니다.
이 기사에서는 네이티브 가져오기 기능을 사용하여 JavaScript에서 API를 사용할 때 주요 고려 사항을 다루었습니다. 나는 다음을 처리하려고 노력합니다:
이러한 기술을 적용하면 확장 가능하고 효율적이며 메모리에 안전한 방식으로 API 사용을 처리할 수 있습니다.
댓글/피드백을 남겨주세요.
위 내용은 JavaScript의 대용량 데이터에 대한 효율적인 API 소비의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
