React JS: Fetch API를 사용한 인터셉터

인터셉터란 무엇입니까?

인터셉터는 요청이 이루어지거나 응답이 수신되기 전이나 후에 특정 기능을 트리거하는 방법입니다. 가로채기에 가장 일반적으로 사용되는 이유 중 하나는 프런트엔드에서의 인증 또는 API URL을 원본이 아닌 다른 것으로 다시 라우팅하는 것입니다.

가져오기 API

Fetch API는 JavaScript 또는 JavaScript 프런트엔드 라이브러리로 요청 및 응답을 처리하는 매우 간단하고 효과적인 방법입니다. 즉, React JS는 매우 인기 있는 Axios 라이브러리가 등장하기 전에 꽤 많이 사용했습니다. Axios는 실제로 요청과 응답 모두에 대해 가로채기를 처리하는 몇 가지 내장 방법을 가지고 있습니다.

그러나 약간 오래된 코드로 작업하거나 유지 관리할 때 Axios는 오늘날 사용되는 것만큼 널리 사용되지 않았을 수 있으며 Fetch API가 발전할 수 있는 유일한 방법이었습니다.

Fetch API로 가로채기

간단히 말해서 Fetch API 가로채기는 수행하기가 매우 쉽습니다. 필요한 모든 작업은 가져오기 함수 자체를 다시 작성하기만 하면 되기 때문입니다. 가져오기 기능은 리소스(URL)와 구성이라는 두 개의 매개변수를 사용하며 그 후에 Promise를 처리할 수 있습니다.

다음은 fetch API 기능을 이해하기 쉬운 방법입니다. window.fetch에서 _originalFetch _ 함수를 분해하면 이를 사용하여 window.fetch의 인수에서 앞서 언급한 리소스 및 구성을 가져올 수 있습니다.

  const { fetch: originalFetch } = window;
  window.fetch = async (...args) => {
    let [resource, config] = args;
    const response = await originalFetch(resource, config);
    return response;
  };

여기에 작성하는 모든 기능은 이 코드 청크가 React JS에 로드되면 가져오기 호출이 이루어질 때마다 실행됩니다. 테스트를 위해 이것을 App.js의 useEffect 안에 간단히 넣고 이 함수 내부의 콘솔에 무언가를 로그인할 수 있습니다. 가져오기 호출이 이루어질 때마다 해당 콘솔 로그가 실행됩니다.

React JS로 요청을 가로채는 방법

이 데모에서는 게시물에 대한 더미 JSON 생성기에 대한 가져오기 호출을 따옴표에 대한 호출로 다시 라우팅하려고 시도하고 있습니다. 대신 게시물을 가져오기 위해 수행된 모든 호출은 인용문을 가져오도록 리디렉션되고 대신 프런트엔드에 표시됩니다.

const { fetch: originalFetch } = window;
  window.fetch = async (...args) => {
    let [resource, config] = args;
    const URLcutOff = "https://dummyjson.com";
    const trailing = resource.slice(URLcutOff.length);
    if (trailing.startsWith("/posts")) {
      resource = `https://dummyjson.com/quotes?limit=5`;
    }
    const response = await originalFetch(resource, config);
    return response;
  };

이것은 그것을 할 코드입니다. 기본적으로 리소스 URL의 기본 부분을 제거하고 "/posts"문자가 포함된 후행 섹션이 있는지 확인하면 대신 "/quotes"로 대체됩니다. 리소스가 중간에 변경되기 때문에 originalFetch 함수는 이제 변경된 리소스를 사용하고 여기에서 다시 전송된 응답을 반환합니다.

그렇게 간단합니다! 이 코드를 다시 작성하여 여기에 제공된 두 가지 대신 고유한 API 호출을 시도할 수 있습니다. React 프로젝트는 직접 사용해 볼 수 있도록 설정되었습니다. 한 쌍의 버튼이 있는 프런트엔드가 있습니다. 게시물에 대한 데이터를 반환하는 버튼(Posts)과 게시물 버튼을 클릭할 때마다 게시물 리소스에 대한 호출을 중지하고 대신 quotes 리소스를 호출하는 다른 버튼(Intercept)이 있습니다.

데모:

Posts 버튼을 클릭하면:

Posts 버튼을 클릭한 후 Intercept 버튼을 클릭한 경우:


검사 탭에서 Posts 버튼을 클릭한 후에도 quotes API가 호출되는 것을 볼 수 있습니다.

Fetch API를 사용하여 요청을 가로채는 원숭이 패치의 간단한 데모였습니다. 여기a link가 React JS의 모든 소스 코드를 포함하는 저장소에 있습니다.

소스 코드: https://github.com/snigdho611/fetch-interceptor
작성자: Snigdho Dip Howlader