React & AXIOS로 글로벌 핸들러를 작성하는 방법은 무엇입니까?

질문

 

이 프로젝트에서 react.js & AXIOS를 사용하고 있으며 catch 추가 요청을 어디서나 전달하지 않고 전역 오류 처리기를 만들고 싶습니다.모든 요청을 수집하는 서비스를 가지고 있으며 새로운 인스턴스를 만들어 사용하고 있습니다.

import Axios from 'axios';
import { getSiteId } from '../helpers';

export class BaseService {
  baseRoute;
  promise;
  constructor() {
    let siteUrl = (process.env && process.env.REACT_APP_API_URL) || '';
    this.baseRoute = `${siteUrl}/api/v1`;

  }

  async create(item) {
    return await Axios.post(`${this.generateURL()}/`, item, {
      ...this.configuration,
    })
      .catch(error => {
        return this.errors(error);
      });

  }
  async update(item, id) {
    return await Axios.patch(`${this.generateURL(id)}`, item, {
      ...this.configuration,
    });
  }
  async filter(query) {
    return await Axios.get(`${this.generateURL()}`, {
      ...this.configuration,
      params: query,
    });

}

이렇게 새로운 인스턴스를 생성

let service= serviceFactory.getInstance();

그런 다음 모든 기능에 액세스

모든 요청에 .catch를 추가하고 모달과 같은 component를 렌더링하는 전역 핸들러를 수행하는 방법글로벌 장소에서 모든 장소에 전달하지 말고

 

답변1

 

오류 경계를 확인했습니다. 해당 래퍼 component는 전체 component를 감싸고 잡히지 않은 jS 오류 / 실행 및 모든 대체 UI를 표시 할 수 있습니다.

https://react.js.org/docs/error-boundaries.html

 

답변2

 

Axios.create () 메소드를 사용할 수 있습니다. 공식 문서의 예.

export const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

이제이 같은 곳에서 사용하도록 내보낼 수 있습니다.

import { instance } from './service'

또는 일반적인 JS로

const { instance } = require('./service')

 

 

 

 

 

출처 : https://stackoverflow.com/questions/63277960/how-to-create-a-global-handler-with-react-axios