Javascript에서 XHR/fetch 메서드를 재정의하는 방법은 무엇입니까?

소개

이 게시물에서는 XHR을 재정의하거나 javascript에서 요청을 가져오는 방법을 설명합니다. XHR에 후크를 추가하거나 요청을 가져오기 위해 javascript의 Proxy 객체를 사용할 것입니다.

전제 조건

XMLHttpRequest 및 Fetch request의 좋은 지식

Proxy javascript의 객체

Callbacks 및 Promise

왜 중요한가요?

때때로 전면에서 API 요청으로 작업할 때. 그리고 모든 요청에 ​​데이터를 보내거나 모든 응답 데이터를 필터링하려는 시나리오에 직면합니다. 또는 당사가 제3자 웹사이트와 협력하는 경우(예: 당사는 Shopify 스토어용 제3자 앱입니다. 전면에는 사용자가 제품을 장바구니에 추가할 때 팝업을 표시하고 싶습니다. API 호출에 후크를 추가하고 고객의 활동을 모니터링할 수 있습니다.

Javascript에서 XHR/fetch 메서드를 재정의하는 방법은 무엇입니까?

우리는 javascript의 Proxy 객체를 사용할 것입니다.
프록시 개체를 사용하면 다른 개체에 대한 프록시를 생성할 수 있으며 해당 개체에 대한 기본 작업을 가로채고 재정의할 수 있습니다.

XMLHttpRequest 재정의
XMLHttpRequest(XHR) 개체는 서버와 상호 작용하는 데 사용됩니다. 전체 페이지를 새로 고치지 않고도 URL에서 데이터를 검색할 수 있습니다. 이를 통해 웹 페이지는 사용자가 수행하는 작업을 방해하지 않고 페이지의 일부만 업데이트할 수 있습니다. XHR은 클래스 기본 개체입니다. 다음은 XHR에 후크를 추가하기 위한 스니펫입니다.

XMLHttpRequest = new Proxy(XMLHttpRequest, {
      construct: function (target, args) {
        const xhr = new target(...args);
        // Do whatever you want with XHR request
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 1) {
            // Before sent request to server
            xhr.setRequestHeader("Authorization", "XXXX-XXXX-XXXX-XXXX");
          }
          if (xhr.readyState === 4) {
            // After complition of XHR request 
            if (xhr.status === 401) {
              alert("Session expired, please reload the page!");
            }
          }
        };
        return xhr;
      },
    });

위의 예에서 코드를 사용하여 XHR의 새 복사본을 만들고 XHR에 다시 할당했습니다. 페이지에서 제출할 모든 요청에 ​​새 헤더를 추가했습니다. XHR이 완료된 경우에도 응답 데이터를 확인할 수 있습니다. 코드를 XHR 요청에 성공적으로 삽입했습니다.

가져오기 API 요청 재정의
Fetch API는 요청 및 응답과 같은 프로토콜의 일부에 액세스하고 조작하기 위한 JavaScript 인터페이스를 제공합니다. 또한 네트워크를 통해 리소스를 비동기적으로 가져오는 쉽고 논리적인 방법을 제공하는 글로벌 fetch() 메서드를 제공합니다. 가져오기는 함수 기본 개체입니다. 다음은 가져오기 요청에 후크를 추가하기 위한 스니펫입니다.

window.fetch = new Proxy(window.fetch, {
      apply: function (target, that, args) {
        // args holds argument of fetch function
        // Do whatever you want with fetch request
        let temp = target.apply(that, args);
        temp.then((res) => {
          // After completion of request
          if (res.status === 401) {
            alert("Session expired, please reload the page!");
          }
        });
        return temp;
      },
    });

위의 가져오기 예에서는 프록시를 사용하여 가져오기의 복사본을 만들고 원래 가져오기 요청에 다시 할당했습니다. 프록시의 apply 속성은 함수를 값으로 받습니다. 전달된 함수는 fetch가 호출될 때마다 실행됩니다. 가져오기 요청에 후크가 있습니다. 요청의 페이로드를 추가/업데이트하거나 삭제할 수 있는 사용자 지정 헤더를 추가할 수 있습니다. API를 성공적으로 완료한 후 응답 헤더를 필터링하고 응답 데이터를 추가/업데이트하거나 삭제할 수 있습니다.

이것이 API 호출에 후크를 추가하려는 모든 개발자에게 도움이 되고 요구 사항을 충족하기를 바랍니다. 제안은 가장 환영합니다. Github으로 연락해 주세요.