JavaScript의 대용량 데이터에 대한 효율적인 API 소비

대규모 데이터세트를 처리하는 API로 작업할 때는 데이터 흐름을 효율적으로 관리하고 페이지 매김, 속도 제한, 메모리 사용량과 같은 문제를 해결하는 것이 중요합니다. 이 기사에서는 JavaScript의 기본 가져오기 기능을 사용하여 API를 사용하는 방법을 살펴보겠습니다. 다음과 같은 중요한 주제를 살펴보겠습니다.

• 대량의 데이터 처리: 시스템에 부담을 주지 않도록 대규모 데이터세트를 점진적으로 검색합니다.
• 페이지 매기기: Storyblok Content Delivery API를 포함한 대부분의 API는 페이지 단위로 데이터를 반환합니다. 효율적인 데이터 검색을 위해 페이지 매김을 관리하는 방법을 살펴보겠습니다.
• 비율 제한: API는 남용을 방지하기 위해 비율 제한을 적용하는 경우가 많습니다. 이러한 제한을 감지하고 처리하는 방법을 살펴보겠습니다.
• 재시도 메커니즘: API가 429 상태 코드(요청이 너무 많음)로 응답하는 경우 원활한 데이터를 보장하기 위해 재시도 전 대기 시간을 나타내는 "재시도 후" 메커니즘을 구현합니다. 가져오는 중입니다.
• 동시 요청: 여러 페이지를 병렬로 가져오면 프로세스 속도가 빨라질 수 있습니다. JavaScript의 Promise.all()을 사용하여 동시 요청을 보내고 성능을 향상하겠습니다.
• 메모리 누수 방지: 대규모 데이터 세트를 처리하려면 신중한 메모리 관리가 필요합니다. 생성기 덕분에 데이터를 청크로 처리하고 메모리 효율적인 작업을 보장합니다.

Storyblok Content Delivery API를 사용하여 이러한 기술을 살펴보고 가져오기를 사용하여 JavaScript에서 이러한 모든 요소를 ​​처리하는 방법을 설명합니다. 코드를 자세히 살펴보겠습니다.

Storyblok Content Delivery API 사용 시 유의사항

코드를 살펴보기 전에 고려해야 할 Storyblok API의 몇 가지 주요 기능은 다음과 같습니다.

• CV 매개변수: cv(콘텐츠 버전) 매개변수는 캐시된 콘텐츠를 검색합니다. cv 값은 첫 번째 요청에서 반환되며 동일한 캐시된 버전의 콘텐츠를 가져오도록 후속 요청에서 전달되어야 합니다.
• 페이지 및 페이지별 페이지 매김: page 및 per_page 매개변수를 사용하여 각 요청에서 반환되는 항목 수를 제어하고 결과 페이지를 반복합니다.
• 총 헤더: 첫 번째 응답의 총 헤더는 사용 가능한 총 항목 수를 나타냅니다. 이는 가져와야 하는 데이터 페이지 수를 계산하는 데 필수적입니다.
• 429(속도 제한) 처리: Storyblok은 속도 제한을 시행합니다. 이를 누르면 API는 429 상태를 반환합니다. Retry-After 헤더(또는 기본값)를 사용하여 요청을 재시도하기 전에 기다려야 하는 시간을 알 수 있습니다.

대규모 데이터 세트를 처리하기 위해 fetch()를 사용하는 JavaScript 예제 코드

JavaScript의 기본 가져오기 기능을 사용하여 이러한 개념을 구현한 방법은 다음과 같습니다.
다음 사항을 고려하세요.

• 이 스니펫은 예로 story.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 매개변수(캐싱에 사용됨)를 검색하기 때문에 중요합니다.
총 헤더를 사용하여 필요한 총 페이지 수를 계산할 수 있으며, cv 매개변수는 캐시된 콘텐츠가 사용되도록 보장합니다.

3) 페이지 매김 처리

페이지 매김은 페이지 및 페이지별 쿼리 문자열 매개변수를 사용하여 관리됩니다. 코드는 페이지당 25개의 스토리를 요청하며(조정 가능) 총 헤더는 가져와야 하는 페이지 수를 계산하는 데 도움이 됩니다.
코드는 API를 압도하지 않고 성능을 향상시키기 위해 한 번에 최대 7개(조정 가능) 병렬 요청 배치로 스토리를 가져옵니다.

4) Promise.all()을 사용한 동시 요청:

프로세스 속도를 높이기 위해 JavaScript의 Promise.all()을 사용하여 여러 페이지를 병렬로 가져옵니다. 이 메서드는 여러 요청을 동시에 보내고 모든 요청이 완료될 때까지 기다립니다.
병렬 요청의 각 배치가 완료된 후 결과가 처리되어 스토리가 생성됩니다. 이렇게 하면 모든 데이터를 한 번에 메모리에 로드하는 것을 방지하여 메모리 소비를 줄일 수 있습니다.

5) 비동기 반복을 통한 메모리 관리(await...of):

모든 데이터를 배열로 수집하는 대신 JavaScript 생성기(함수* 및 wait...of)를 사용하여 각 스토리를 가져오는 대로 처리합니다. 이는 대규모 데이터 세트를 처리할 때 메모리 과부하를 방지합니다.
스토리를 하나씩 생성함으로써 코드 효율성을 유지하고 메모리 누수를 방지합니다.

6) 비율 제한 처리:

API가 429 상태 코드(속도 제한)로 응답하는 경우 스크립트는 retryAfter 값을 사용합니다. 그런 다음 요청을 재시도하기 전에 지정된 시간 동안 일시 중지됩니다. 이렇게 하면 API 속도 제한을 준수하고 너무 많은 요청을 너무 빨리 보내는 것을 방지할 수 있습니다.

결론

이 기사에서는 네이티브 가져오기 기능을 사용하여 JavaScript에서 API를 사용할 때 주요 고려 사항을 다루었습니다. 나는 다음을 처리하려고 노력합니다:

• 대규모 데이터세트: 페이지 매김을 사용하여 대규모 데이터세트를 가져옵니다.
• 페이지 매기기: 페이지 및 페이지당 매개변수를 사용하여 페이지 매기기를 관리합니다.
• 비율 제한 및 재시도 메커니즘: 비율 제한을 처리하고 적절한 지연 후 요청을 재시도합니다.
• 동시 요청: 데이터 검색 속도를 높이기 위해 JavaScript의 Promise.all()을 사용하여 병렬로 페이지를 가져옵니다.
• 메모리 관리: JavaScript 생성기(함수* 및 wait...of)를 사용하여 과도한 메모리 소비 없이 데이터를 처리합니다.

이러한 기술을 적용하면 확장 가능하고 효율적이며 메모리에 안전한 방식으로 API 사용을 처리할 수 있습니다.

댓글/피드백을 남겨주세요.

참고자료

• 자바스크립트 생성기
• JavaScript 런타임을 사용하세요
• Storyblok 콘텐츠 전달 API

위 내용은 JavaScript의 대용량 데이터에 대한 효율적인 API 소비의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!