인터셉터 및 오류 처리와 함께 Fetch API 사용

Fetch API에는 내장 인터셉터 및 글로벌 오류 처리가 없지만 캡슐화 기능을 통해 구현할 수 있습니다. 2. 사용자 정의 apiclient에서 요청 차단은 전송하기 전에 인증 헤더와 기본 구성을 추가 할 수 있으며 응답 차단은 응답 데이터 또는 오류를 균일하게 처리 할 수 있습니다. 3. 응답 상태 및 컨텐츠 유형을 구문 분석하여 일반적인 HTTP 오류가 표준화 된 오류 개체로 변환되어 던져집니다. 4. 로깅, 타임 아웃 제어 (AbortController 사용) 및 글로벌 오류 청취 (예 : 비 처분 이벤트) 통합; 5. 마지막으로, 한 번에 작성된 강력하고 유지 관리 가능한 HTTP 클라이언트는 여러 번 재사용 할 필요가 없습니다.

JavaScript에서 Fetch API와 함께 작업 할 때는 Axios와 같은 요청/응답 인터셉터 또는 중앙 오류 처리에 대한 내장 지원이 포함되어 있지 않다는 것을 신속하게 알 수 있습니다. 그러나 약간의 추상화로 이러한 기능을 추가하여 HTTP 통화를보다 유지하고 강력하게 만들 수 있습니다.

인터셉터 와 오류 처리가 깨끗하고 재사용 가능한 방식으로 페치 API를 향상시키는 방법은 다음과 같습니다.

custom 사용자 정의 페치 래퍼를 만듭니다

fetch() 직접 호출하는 대신 다음을 허용하는 함수로 랩핑하십시오.

• 요청을 가로 채기 (예 : 인증 헤더 추가)
• 응답 절편 (예 : 오류, 로그, 변환 또는 핸들)
• 전 세계적으로 일반적인 HTTP 오류를 처리하십시오

 const apiclient = async (endpoint, 옵션 = {}) => {
  const defaultheaders = {
    'Content-Type': 'Application/JSON',
  };

  //? 요청 인터셉터 : 보내기 전에 요청을 수정하십시오
  const config = {
    ... 옵션,
    헤더 : {
      ... defaultheaders,
      ... 옵션. 헤더,
    },
  };

  // 사용 가능한 경우 인증 토큰을 추가합니다
  const token = localstorage.getitem ( 'authtoken');
  if (토큰) {
    config.headers [ 'Authorization'] =`bearer $ {token}`;
  }

  const baseurl = 'https://api.example.com';
  const response = await fetch (`$ {baseurl} $ {endpoint}`, config);

  //? 응답 인터셉터 : 응답 및 오류를 처리합니다
  if (! response.ok) {
    errormessage =`http error : $ {response.status}`;
    Errordata를하자;

    const contenttype = response.headers.get ( 'content-type');
    if (contenttype && contenttype.includes ( 'application/json')) {
      errordata = await response.json ();
      errormessage = errordata.message || errormessage;
    } 또 다른 {
      errordata = await response.text ();
    }

    // 표준화 된 오류 객체를 던지십시오
    새 오류를 던지십시오 (json.stringify ({{
      상태 : Response.Status,
      메시지 : errormessage,
      데이터 : errordata,
    });
  }

  // 응답에 내용이있는 경우에만 JSON을 구문 분석합니다
  const contenttype = response.headers.get ( 'content-type');
  if (contenttype && contenttype.includes ( 'application/json')) {
    RETURT AWAIT RESPING.JSON ();
  }

  반환 대기 응답 .text ();
};

? 인터셉터와 같은 동작을 추가하십시오

fetch 기본적으로 인터셉터를 지원하지 않기 때문에 래퍼 내부에서 시뮬레이션합니다.

• 요청 차단 : fetch 호출되기 전에 옵션을 수정하십시오
• 응답 차단 : 반환하기 전에 응답을 처리하거나 변환합니다

더 모듈 식으로 만들 수도 있습니다.

 // 선택 사항 : 로깅 인터셉터를 추가합니다
const logrequest = (url, 옵션) => {
  console.log (`[API] 요청 : $ {url}`, 옵션);
};

const logresponse = (url, data) => {
  Console.log (`[API] 응답 $ {url} :`, data);
};

// apiclient를 업데이트하여 사용하십시오
const apiclient = async (endpoint, 옵션 = {}) => {
  const baseurl = 'https://api.example.com';
  const url =`$ {baseurl} $ {endpoint}`;

  logrequest (URL, 옵션); //? 인터셉터를 요청하십시오

  // ... (논리의 나머지)

  const data = await (response.json? response.json () : response.text ());

  logresponse (URL, 데이터); //? 응답 인터셉터

  반환 데이터;
};

? 중앙 집중식 오류 처리

모든 .catch() 또는 try/catch 에서 오류를 처리하는 대신 일관되게 처리합니다.

 // 시도/캐치로 사용합니다
노력하다 {
  const user = apiclient ( '/user/123');
  Console.log (사용자);
} catch (오류) {
  const {status, message, data} = json.parse (error.message);

  if (status === 401) {
    // 로그인으로 리디렉션합니다
    Window.location.href = '/로그인';
  } else if (status === 404) {
    Console.warn ( '자원을 찾을 수 없음');
  } 또 다른 {
    Console.error ( 'API ERROR :', 메시지);
  }
}

또는 회복 할 수없는 경우에 글로벌 오류 핸들러를 사용하십시오.

 window.addeventListener ( 'undledredrejection', (이벤트) => {
  const error = json.parse (event.Reason.Message);
  if (error.status> = 500) {
    경고 ( '서버 문제가 있습니다. 나중에 다시 시도하십시오.');
  }
});

? 선택 사항 : 요청 시간 초과를 추가하십시오

fetch 기본적으로 시간을 초과하지 않습니다. AbortController 사용하여 하나를 추가 할 수 있습니다.

 const 컨트롤러 = 새로운 abortController ();
const timeoutid = settimeout (() => controller.abort (), 10000); // 10s

노력하다 {
  const response = await fetch (url, {
    ... 구성,
    신호 : Controller.Signal,
  });
  클리어 타임 아웃 (timeoutid);
  반환 응답;
} catch (err) {
  if (err.name === 'aborterror') {
    새 오류를 던지십시오 ( '요청 시간 초과');
  }
  오류를 던지십시오.
}

✅ 요약

Fetch API는 가볍고 현대적이지만 인터셉터 및 자동 오류 구문 분석과 같은 편의 기능이 부족합니다. 포장하여 :

• ∎ 요청/응답 간섭을 받습니다
• ✅ 전역 오류 처리 및 상태 검사
• ✅ 일관된 헤더 , 인증 및 시간 초과
• 더 나은 UX 및 디버깅

강력한 HTTP 클라이언트 (얇고 스마트 래퍼)를 갖기 위해 Axios가 필요하지 않습니다.

기본적으로 한 번 쓰고 모든 곳에서 재사용하십시오.

위 내용은 인터셉터 및 오류 처리와 함께 Fetch API 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!