Node.js, Deno 및 Bun에서 Fetch API를 사용하는 방법

이 기사에서는 Node.js, Deno 및 Bun에서 Fetch API를 사용하는 방법을 살펴 봅니다.

코어 포인트

현대 자바 스크립트 환경에서 API 페치 API를 가져 오기 :이 기사는 Node.js, Deno 및 Bun과 같은 다양한 JavaScript 환경에서 Fetch API를 사용하는 방법에 대해 설명합니다. 약속 기반 구조와 사용 편의성. 클라이언트 및 서버 측면 페치 사용의 차이 :

Fetch API는 클라이언트 및 서버 환경에서 일관된 인터페이스를 제공하지만이 기사는 클라이언트 COR 및 CSP와 같은 사용 제한의 주요 차이점을 강조합니다. 서버 측 제한뿐만 아니라 타사 API 제한이있을 수 있습니다.

• 효과적인 페치 요청 정책 : 이 기사 오류 처리. fetch api 및 xmlhttprequest HTTP 요청을 통해 데이터를 얻는 것은 웹 애플리케이션의 기본 활동입니다. 브라우저에서 그러한 호출을했을 수도 있지만 Fetch API는 Node.js, Deno 및 Bun에서 기본적으로 지원됩니다.
브라우저에서는 전체 화면 새로 고침없이 정보를 표시하려면 서버에서 정보를 요청해야 할 수도 있습니다. 이것은 종종 AJAX 요청 또는 단일 페이지 응용 프로그램 (SPA)이라고합니다. 1999 년에서 2015 년 사이에 XMLHTTPREQUEST가 유일한 옵션이었습니다.
• 파일 업로드 진행 상황을 보여 주려면 여전히 그렇습니다. xmlhttprequest는 다소 서투른 콜백 기반 API이지만 세밀한 제어를 허용하며 이름에도 불구하고 텍스트, 바이너리, JSON 및 HTML과 같은 XML 이외의 형식의 응답을 처리합니다. 브라우저는 2015 년부터 Fetch API를 구현했습니다. xmlhttprequest보다 단순하고 쉽고, 더 일관된 약속 기반 대안입니다. 서버 측 코드는 또한 다른 서버에서 API를 호출하는 HTTP 요청을해야 할 수도 있습니다. 첫 번째 버전에서 시작하여 Deno 및 Bun Runtimes는 브라우저의 Fetch API를 효과적으로 복제하여 클라이언트와 서버 측 모두에서 유사한 코드가 실행될 수 있도록합니다. Node.js에는 2022 년 2 월까지 Node-Fetch 또는 Axios와 같은 타사 모듈이 필요하며 버전 18은 표준 Fetch API를 추가합니다. 여전히 실험적인 것으로 간주되지만 이제 동일한 코드를 사용하는 대부분의 경우 Fetch ()를 사용할 수 있습니다.
기본 페치 예
• 이 간단한 예제는 URI에서 응답 데이터를 얻습니다. fetch () 호출은 응답 객체로 해결하는 약속을 반환하여 결과에 대한 정보를 제공합니다. 약속 기반 .json () 메소드를 사용하여 HTTP 응답 본문을 JavaScript 객체로 구문 분석 할 수 있습니다.

  const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');

  <🎜 🎜> <<> 클라이언트 및 서버 페치

  <🎜 🎜> API는 다양한 플랫폼에서 동일 할 수 있지만 클라이언트 fetch () 요청을 할 때 브라우저는 제한을 시행합니다. <🎜 🎜> <<> 크로스 오리올 리소스 공유 (CORS)

  클라이언트 JavaScript는 자체 도메인 내에서 API 엔드 포인트 와만 통신 할 수 있습니다.

  https://www.php.cn/link/7d95c1c55d84afcc81845d9fb25c0cc0c <🎜 https://www.php.cn/link/link/link/link/link/link/38904040 f8 예 : https://www.php.cn/link/a9db15913897019149a280733737f4a0f8api/ <🎜 <🎜
  또는
  • https://www.php.cn/link/a9db15913897019a2803370149a28037370149a280337019191490337014 🎜>.

    <🎜 https://www.php.cn/link/246E28F16369B577BD206CFA3B36295C 에서 서비스를 호출 할 수 없습니다. 서버가 HTTP 액세스-콘트롤-홀로-오리인 헤더를 설정하여 서버를 설정할 수 없습니다.

    <🎜 🎜> <<> 컨텐츠 보안 정책 (CSP) <🎜 🎜> 웹 사이트/응용 프로그램은 컨텐츠 보안 정책 HTTP 헤더 또는 메타 태그를 설정하여 페이지에서 허용되는 자산을 제어 할 수 있습니다. 스크립트, iframes, 글꼴, 이미지, 비디오 등이 우연히 또는 악의적으로 주입되면이를 방지 할 수 있습니다. 예를 들어, Default-SRC 'self'를 설정하면 Fetch ()가 자체 도메인 외부의 데이터를 요청하지 못하게합니다 (XMLHTTPREQUEST, WEBSOCKET, SERVER SENT EVENTS 및 BEACONS도 제한). 서버 측 Fetch API 호출 Node.js, Deno 및 BUN에서 호출은 제한적이지 않으며 모든 서버에서 데이터를 요청할 수 있습니다. 즉, 타사 API는 5 월 : 는 키 또는 oauth <🎜 를 사용하여 일종의 인증 또는 승인이 필요합니다. 는 분당 호출을 한 번 이내에 한 번 또는 <🎜 🎜>와 같은 최대 요청 임계 값을 갖습니다. 상업용 수수료는 방문 <🎜 에 청구됩니다

    CORS 및 CSP 문제를 피할 수 있도록 서버 측 Fetch () 호출을 프록시 클라이언트 요청에 사용할 수 있습니다. 즉, 책임있는 사이버 시민이되고 수천 개의 요청이있는 폭탄 서비스가 아닌 책임을 져야합니다.

    <🎜 🎜> <<> 사용자 정의 페치 요청 <🎜 🎜> 위의 예제는 uri <🎜 https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455 <🎜 🎜 <🎜 🎜>의 데이터를 요청합니다. 표면 아래에서 JavaScript는 메소드, 헤더, 차체 텍스트 등과 같은 요청의 전체 세부 사항을 나타내는 요청 객체를 만듭니다. <))> fetch ()는 두 개의 매개 변수를 수락합니다 : <🎜 🎜>

    리소스 - 문자열 또는 URL 객체 및 <🎜 🎜> 옵션 옵션 매개 변수는 다른 요청 설정 <🎜
  입니다

  • 예 : <🎜 🎜> 옵션 객체는 node.js 또는 클라이언트 코드에서 다음 속성을 설정할 수 있습니다.

    属性	值
    method	GET（默认）、POST、PUT、PATCH、DELETE 或 HEAD
    headers	字符串或 Headers 对象
    body	可以是字符串、JSON、blob 等
    mode	same-origin、no-cors 或 cors
    credentials	omit、same-origin 或 include
    redirect	follow、error 或 manual
    referrer	引荐 URL
    integrity	子资源完整性哈希
    signal	AbortSignal 对象，用于取消请求

    요청 객체를 생성하여 retch ()로 전달할 수 있습니다. API 엔드 포인트를 사전 정의하거나 일련의 유사한 요청을 보내려면 유용 할 수 있습니다.
    <<> (다음 내용은 길이가 너무 길기 때문에 코어 컨텐츠가 위에서 요약되어 있기 때문에 생략됩니다. 필요한 경우 HTTP 헤더 처리, 약속 처리, 응답과 같은 나머지 부분을 계속 처리 할 수 ​​있습니다. 분석, 요청 낙태 등)

    const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');

    요약 node.js (17 이상)의 이전 버전을 사용하지 않는 한 Fetch API는 서버와 클라이언트의 JavaScript에서 사용할 수 있습니다. 유연하고 사용하기 쉽고 모든 런타임에 걸쳐 일관성이 있습니다. 캐싱, 재 시도 또는 파일 처리와 같은 고급 기능이 필요한 경우에만 타사 모듈이 필요합니다.

  위 내용은 Node.js, Deno 및 Bun에서 Fetch API를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!