캐시 페치 된 Ajax 요청이 로컬로 요청됩니다 : Fetch API를 포장합니다

이 기사는 초대 ​​된 작가 Peter Bengtsson이 작성했습니다. Sitepoint의 특별 게스트 포스트 이 기사에서는 반복적으로 실행되면 세션 저장소에서 읽을 수 있도록 페치 요청의 로컬 캐시를 구현하는 방법을 보여줍니다. 이점은 캐시하려는 모든 리소스에 대해 사용자 정의 코드를 작성할 필요가 없다는 것입니다.

다음 JavaScript 파티를 과시하고 약속, 최첨단 API 및 로컬 스토리지를 처리하는 다양한 기술을 보여 주려면 계속 읽으십시오. 주요 이익 Fetch API를 사용하여 개발자는 AJAX 요청의 로컬 캐시를 생성하여 중복 네트워크 호출을 줄이고 데이터 검색 속도를 높이면 효율성을 향상시킬 수 있습니다.

글로벌 변수를 사용하여 캐시하는 간단한 방법은 세션 지속성으로 전환되면 동일한 세션 지속성에서 데이터를 다시로드 할 수 있습니다.

구현 는 컨텐츠 유형과 URL을 기반으로 응답을 자동으로 캐시 할 수있는 표준 호출을 캡슐화하여 캐시 메커니즘을 보편적으로 만듭니다.

네트워크 요청을하기 전에 세션 스토리지에서 캐시 히트 처리 및 구식 데이터 사용을 피하기 위해 만료 된 컨텐츠 관리가 포함되어 있습니다.

향후 개선에는 이진 데이터 처리 및 해시 URL을 캐시 키로 사용하여 웹 애플리케이션에서 스토리지 및 검색 프로세스를 최적화하는 것이 포함될 수 있습니다.

fetch api

이 시점에서 Fetch에 익숙해야합니다. 이전 XMLHTTPREQUEST API를 교체하기위한 브라우저의 새로운 기본 API입니다.
• Fetch를 사용할 수 있습니까?
https://www.php.cn/link/b751ea087892ebeca363034301f45c69 웹 사이트의 메인 브라우저의 Fetch 기능에 대한 지원에 대한 데이터.
• 
  모든 브라우저가 완벽하게 구현되지는 않는 경우 GitHub의 Fetch PolyFill을 사용할 수 있습니다 (하루 종일 아무것도하지 않는 경우 여기에 페치 표준 사양이 있습니다).
간단한 대안
• 다운로드해야 할 리소스를 정확히 알고 있고 한 번만 다운로드하려고한다고 가정 해 봅시다. 다음과 같이 글로벌 변수를 캐시로 사용할 수 있습니다. cachedFetch 코드 펜 예 fetch 이것은 캐시 된 데이터를 보유하기위한 전역 변수에만 의존합니다. 직접적인 문제는 페이지를 다시로드하거나 새 페이지로 이동하면 캐시 된 데이터가 사라집니다.
단점을 해부하기 전에 첫 번째 간단한 솔루션을 업그레이드합시다.
• cachedFetch 코드 펜 예
첫 번째 직접적인 문제는 Fetch가 약속을 기반으로한다는 것입니다. 즉, 우리는 그것이 언제 이루어질지를 결정할 수 없다는 것을 의미합니다.
• 두 번째 문제는이 솔루션이 특정 URL 및 특정 캐시 된 데이터 스 니펫에 매우 구체적이라는 것입니다 (이 예의 주요 정보). 우리가 원하는 것은 보편적 인 URL 기반 솔루션입니다.

  첫 번째 구현 - 간단하게 유지하십시오 약속을 반환하는 페치 주변의 래퍼를 만들어 봅시다. 이를 호출하는 코드는 결과가 네트워크에서 또는 로컬 캐시에서 상관없이 신경 쓰지 않을 수 있습니다.

  그러니

  이 작업을 수행했다고 상상해보십시오

  코드 펜 예

  이제 중복 네트워크 통화가 로컬 캐시의 혜택을받을 수 있도록 래핑하려고합니다. 단순히 CachedFetch라고 부르겠습니다. 코드는 다음과 같습니다.

  처음 실행되면 네트워크를 통해 요청을 구문 분석하고 결과를 캐시에 저장해야합니다. 두 번째는 로컬 스토리지에서 직접 추출해야합니다.

  단순히 Fetch 함수를 래핑하는 코드부터 시작하겠습니다. 코드 펜 예 이것은 작동하지만 물론 작동하지 않습니다. 먼저 추출 된 데이터의 저장을 구현합시다.

  let origin = null;
  fetch('https://httpbin.org/get')
    .then(r => r.json())
    .then(information => {
      origin = information.origin; // 您的客户端IP
    });
  
  // 需要延迟以确保fetch已完成
  setTimeout(() => {
    console.log('您的来源是 ' + origin);
  }, 3000);

  코드 펜 예

  여기에는 할 일이 많이 있습니다. Fetch가 반환 한 첫 번째 약속은 실제로 GET 요청을 계속 수행합니다. CORS (Cross-Origin 리소스 공유)에 문제가있는 경우 .text (), .json () 또는 .blob () 메소드가 작동하지 않습니다. 가장 흥미로운 특징은 첫 번째 약속으로 반응 한 응답 객체를

  복제해야한다는 것입니다. 우리가하지 않으면, 우리는 스스로를 과부하게하고, 약속의 최종 사용자가 .json () (예를 들어)에 전화하려고하면이 오류가 발생합니다.

  주목해야 할 또 다른 것은 응답 유형을 신중하게 처리하는 것입니다. 상태 코드가 200

  인 경우에만 응답을 저장하고 콘텐츠 유형은 Application/JSON 또는 Text/*입니다. SessionStorage는 텍스트 만 저장할 수 있기 때문입니다.

  fetch('https://httpbin.org/get')
    .then(r => r.json())
    .then(info => {
      sessionStorage.setItem('information', JSON.stringify(info));
    });
  
  // 需要延迟以确保fetch已完成
  setTimeout(() => {
    let info = JSON.parse(sessionStorage.getItem('information'));
    console.log('您的来源是 ' + info.origin);
  }, 3000);

  다음은 그것을 사용하는 방법의 예입니다.

  지금 까지이 솔루션에 대한 영리한 것은 JSON 및 두 번째 구현 - 실제 반환 캐시 히트 따라서 따라서 첫 번째 구현은 요청의 응답을 저장하는 책임입니다. 그러나 두 번째로 CachedFetch를 호출하는 경우에도 SessionStorage

  에서 아무것도 검색하려고 시도하지 않습니다. 우리가해야 할 일은 약속을 돌려주는 것이며, 약속은 응답 객체를 구문 분석해야합니다.

  fetch('https://httpbin.org/get')
    .then(r => r.json())
    .then(issues => {
      console.log('您的来源是 ' + info.origin);
    });

  매우 기본적인 구현으로 시작합시다 :

  코드 펜 예 작동합니다!

  실제로 작동하는 방법을 확인하려면이 코드의 코드펜을 열고 개발자 도구에서 브라우저의 "네트워크"탭을 엽니 다. 실행 버튼을 몇 번 눌러 (코드펜의 오른쪽 상단)를 누르면 네트워크를 통해 이미지 만 반복적으로 요청하는 것을 볼 수 있습니다.

  이 솔루션의 영리성 중 하나는 "콜백 파스타"의 부족입니다. SessionStorage.getItem 호출은 동기식 (즉, 차단)이므로 "현지 스토리지에 있습니까?" 그리고 콘텐츠가있는 경우에만 캐시 된 결과를 반환합니다. 그렇지 않은 경우 IF 문은 일반 코드 만 계속 실행합니다.

  세 번째 구현 - 만료 시간은 어떻습니까?

  지금까지 우리는 SessionStorage를 사용하고 있습니다. LocalStorage와 같습니다. 새 탭을 시작할 때 SessionStorage가 지워집니다. 즉, 캐시 시간을 너무 길게 피하기 위해 "자연스러운 방법"을 활용하고 있음을 의미합니다. 대신 LocalStorage를 사용하고 무언가를 캐시하면 원격 콘텐츠가 변경된 경우에도 항상 거기에 갇히게됩니다.

  더 나은 솔루션은

  user

  를 제어하게하는 것입니다. (이 경우 사용자는 캐시드 페치 기능을 사용하는 웹 개발자입니다). 서버 측의 Memcached 또는 Redis 스토리지와 마찬가지로 캐시를 얼마나 오래 지정하는 평생을 설정할 수 있습니다.

  예를 들어, 파이썬에서 (플라스크 사용) :

  이제 SessionStorage 나 LocalStorage에는이 기능이 내장되어 있지 않으므로 수동으로 구현해야합니다. 저장된 시간의 타임 스탬프를 항상 기록하고 가능한 캐시 히트를 비교하여이를 수행합니다.

  그러나 우리가 이것을하기 전에 어떻게 생겼습니까? 예를 들면 : 우리가 추가 할 주요 새로운 것은 응답 데이터를 저장할 때마다 저장할 때

  를 기록 할 때도 기록한다는 것입니다. 그러나 이제 우리는 SessionStorage 대신 LocalStorage의보다 안정적인 저장으로 전환 할 수 있습니다. 우리의 사용자 정의 만료 코드는 지속적인 로컬 스토리지에서 매우 오래된 캐시 히트를 얻지 못할 것입니다.

  그래서 이것은 우리의 궁극적 인 작업 솔루션입니다 :

  코드 펜 예

  let origin = null;
  fetch('https://httpbin.org/get')
    .then(r => r.json())
    .then(information => {
      origin = information.origin; // 您的客户端IP
    });
  
  // 需要延迟以确保fetch已完成
  setTimeout(() => {
    console.log('您的来源是 ' + origin);
  }, 3000);

  미래의 실현 - 더 좋고, 더 화려하고, 쿨러

  우리는 이러한 웹 API를 과도하게 액세스하는 것을 피할뿐만 아니라 LocalStorage가 종속 네트워크보다 훨씬 빠르다는 것입니다. LocalStorage vs. XHR : localforage vs. XHR

  의 비교는이 블로그 게시물을 참조하십시오. 그것은 다른 것들을 측정하지만 기본적으로 LocalStorage는 매우 빠르며 디스크 캐시 워밍업은 드물다는 결론을 내립니다.

  그렇다면 솔루션을 어떻게 더 개선합니까?

  처리 바이너리 응답 여기에서 구현은 텍스트가 아닌 컨텐츠 (예 : 이미지)를 캐시하지 않지만 캐시 할 이유가 없습니다. 더 많은 코드가 필요합니다. 특히 Blob에 대한 자세한 정보를 저장할 수 있습니다. 각 응답은 기본적으로 블로브입니다. 텍스트와 json의 경우, 그것은 단지 다양한 문자열 일뿐입니다. 문자열 자체에서 추론 할 수 있으므로 유형과 크기는 중요하지 않습니다. 이진 함량의 경우 블로브를 Arraybuffer로 변환해야합니다.

  호기심 많은 사람들의 경우 이미지를 지원하는 구현 확장을 보려면이 코드펜을 확인하십시오.

  사용 해시 캐시 키 를 사용하십시오 또 다른 잠재적 개선은 각 URL (키로 사용)을 더 작게 해제하여 속도를위한 공간을 거래하는 것입니다. 위의 예에서는 매우 작고 간결한 URL (예 : httpbin.org/get) 만 사용하지만 URL이 매우 길면 쿼리 문자열 컨텐츠가 많고 이러한 URL이 많이 있습니다. , 그러면 그들은 많은 것을 더할 것입니다.

  이 문제에 대한 해결책은 안전하고 빠른 것으로 간주되는이 영리한 알고리즘을 사용하는 것입니다.

  이 마음에 들면이 코드 펜을 확인하십시오 : [https://www.php.cn/link/946af35555203afdb63e571b873e419f6]. 웹 콘솔에서 스토리지를 확인하면 557027443과 비슷한 키가 표시됩니다.
  결론 이제 웹 애플리케이션에 추가 할 수있는 작업 솔루션이 있으며, 여기서 웹 API를 사용하는 경우 사용자에게 응답을 잘 캐시 할 수 있음을 알고 있습니다.

  마지막 것은이 프로토 타입의 자연스러운 확장 일 수 있습니다.

  캐시 된 추출 된 Ajax 요청 (FAQ) FAQ 캐싱의 중요성은 Ajax 요청을 가져 오는 것의 중요성은 무엇입니까?

  캐싱 페치 된 Ajax 요청은 웹 애플리케이션의 성능을 향상시키는 데 중요합니다. 브라우저는 서버 응답 사본을 저장하여 동일한 요청을 다시 할 필요가 없습니다. 이렇게하면 서버의로드가 줄어들고 웹 페이지의로드 시간을 가속화하여 더 나은 사용자 경험을 제공합니다.

  Fetch API는 캐시와 어떻게 작동합니까?

  Fetch API는 HTTP 요청을 할 수있는 강력하고 유연한 방법을 제공합니다. 요청이 캐시와 상호 작용하는 방법을 지정할 수있는 내장 캐싱 메커니즘이 포함되어 있습니다. 캐시 모드를 각각 다른 수준의 캐시 제어를 갖는 각각 다른 수준의 캐시 제어를 갖는 "기본", "없음", "다시로드", "없음", "포스 캐시"또는 "만 IF 캐시"로 설정할 수 있습니다.

  Fetch API의 다른 캐시 모드는 무엇이며 무엇을 의미합니까?

  Fetch API는 여러 캐시 모드를 제공합니다. "기본"은 표준 HTTP 캐싱 규칙을 따릅니다. "없음"은 캐시를 완전히 우회합니다. "Reload"는 캐시 된 데이터를 무시하고 새로운 요청을 보냅니다. "No-Cache"는 캐시 버전을 사용하기 전에 서버를 사용하여 데이터를 확인합니다. "Force-Cache"는 신선도에 관계없이 캐시 된 데이터를 사용합니다. "Only-IF 캐칭"은 캐시 데이터를 사용할 수있는 경우에만 사용합니다. 그렇지 않으면 실패합니다.

  ajax 요청에서 캐시를 구현하는 방법은 무엇입니까?

  AJAX 설정에서 캐시 속성을 설정하여 AJAX 요청에서 캐시를 구현할 수 있습니다. true로 설정되면 브라우저가 응답을 캐시 할 수 있습니다. 또는 Fetch API의 캐시 옵션을 사용하여 캐시의 동작을 더 잘 제어 할 수 있습니다.

  ajax 요청에서 캐시를 방지하는 방법은 무엇입니까?

  AJAX 요청의 캐싱을 방지하려면 AJAX 설정에서 캐시 속성을 False로 설정할 수 있습니다. 이렇게하면 브라우저가 캐시에 응답을 저장하지 않도록합니다. 또는 Fetch API의 "No-Store"캐싱 옵션을 사용하여 캐시를 완전히 우회 할 수 있습니다.

  Ajax와 Fetch API의 캐싱의 차이점은 무엇입니까?

  Ajax와 Fetch API가 모두 캐싱 메커니즘을 제공하지만 Fetch API는 유연성과 제어력이 향상됩니다. Ajax의 캐시 속성은 캐시를 허용하거나 허용하지 않는 간단한 부울 값입니다. 반면, Fetch API의 캐시 옵션을 사용하면 요청이 캐시와 상호 작용하는 방법을 지정하여보다 세분화 된 제어를 제공 할 수 있습니다.

  캐싱은 내 웹 애플리케이션의 성능에 어떤 영향을 미칩니 까?

  캐시는 웹 응용 프로그램의 성능을 크게 향상시킬 수 있습니다. 서버 응답 사본을 저장하면 브라우저가 다시 동일한 요청을 할 필요가 없습니다. 이렇게하면 서버의로드가 줄어들고 웹 페이지의로드 시간을 속도를 높입니다. 그러나 사용자가 최신 컨텐츠를 볼 수 있도록 캐시를 올바르게 관리해야합니다.

  단일 AJAX 요청의 캐시 동작을 제어 할 수 있습니까?

  예, 각 요청의 AJAX 설정에서 캐시 속성을 설정하여 단일 AJAX 요청의 캐시 동작을 제어 할 수 있습니다. 이를 통해 브라우저가 응답을 캐시 해야하는지 여부를 지정할 수 있습니다.

  ajax 요청의 캐시를 지우는 방법은 무엇입니까?

  ajax 설정에서 캐시 속성을 False로 설정하여 Ajax가 요청한 캐시를 지우십시오. 이렇게하면 브라우저가 캐시에 응답을 저장하지 않도록합니다. 또는 Fetch API의 "Reload"캐시 옵션을 사용하여 캐시 된 데이터를 무시하고 새 요청을 보낼 수 있습니다.

  Ajax 요청을 캐싱하기위한 모범 사례는 무엇입니까?

  AJAX 요청을위한 일부 모범 사례에는 다음이 포함됩니다. 다양한 캐시 모드 이해 및 사용시기, 캐시를 올바르게 관리하여 사용자가 최신 컨텐츠를 볼 수 있도록 캐시 API의 캐시 옵션을 사용하여 캐시를보다 잘 제어합니다. 캐싱 전략을 결정할 때 데이터 및 사용자 경험의 특성도 고려해야합니다.

위 내용은 캐시 페치 된 Ajax 요청이 로컬로 요청됩니다 : Fetch API를 포장합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!