Как создать глобальный обработчик с React & AX IOS? - PullRequest
Новая
       59

Как создать глобальный обработчик с React & AX IOS?

1 голос
/ 06 августа 2020

Я использую ReactJs & AX IOS в этом проекте, и я хочу создать глобальный обработчик ошибок, не передавая везде запрос на добавление к нему 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 к каждому запросу и компоненту рендеринга, например, модально из глобального места, а не передавать во все места, где я использую функции в

Ответы [ 2 ]

2 голосов
/ 06 августа 2020

Вы можете использовать метод Axios.create(). Пример из официальной документации. 

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

Теперь вы можете экспортировать его для использования в любом другом месте. 

import { instance } from './service'

ИЛИ с Common JS

const { instance } = require('./service')
0 голосов
/ 06 августа 2020

Вы проверили, ошибка dry в реакции. Этот компонент-оболочка может быть запрограммирован на весь ваш компонент и перехватывать любые необработанные jS ошибки / запуски и отображать любой резервный пользовательский интерфейс.

https://reactjs.org/docs/error-boundaries.html

...