ReactJS перехватывает http-запрос и показывает Alert при возникновении ошибки - лучшие практики - PullRequest
Новая
       6

ReactJS перехватывает http-запрос и показывает Alert при возникновении ошибки - лучшие практики

0 голосов
/ 31 марта 2020

Я занимаюсь разработкой приложения React и все еще привыкаю к ​​его шаблонам и лучшим практикам. Функциональность, которую я хочу развить, состоит в том, чтобы перехватывать каждый http-запрос, выполняемый в приложении, и показывать предупреждение, если запрос не был успешным. Я уже разработал свое решение для этого запроса, и я хочу поделиться им с каким-либо экспертом реагировать / JS. Может быть, вы можете сказать мне, если что-то не так, или есть лучший путь для этого.

Итак 1) используя AX IOS Я разработал такой перехватчик: 

import axios from 'axios';
import EventBus from "../services/EventBus";

let instance = axios.create();

instance.interceptors.response.use(function (response) {
 return response;
}, 
function (error) {
 EventBus.getInstance().fireEvent("SHOW_ALERT", {
    message: "prendere da error.response.data.message"
 });
return Promise.reject(error);
});
export const http = instance;

2) в любом другом сервисе или компоненте, которым я буду пользоваться пользовательский экземпляр ax ios, так что любой запрос будет передан в коде в точке 1, например: 

import {http} from "../axios/http"

async function request() {
 let response = await http.get('https://www.google.it');
 return response;
}

3) Как вы можете видеть в случае ошибки, я использую этот пользовательский EventBus какой основной код вы можете найти ЗДЕСЬ , который вызовет СОБЫТИЕ

4) Я определил компонент "NotificationContainer" следующим образом: 

class NotificationContainer extends React.Component {

defaultState = {
    showComponent: false
};

state = {
    ...this.defaultState
};

listener = null;

componentDidMount() {
    EventBus.getInstance().addListener("SHOW_ALERT", this.listener = this.showAlert)
}

componentWillUnmount() {
    EventBus.getInstance().removeListener(this.listener)
}

showAlert = (data) => {
    this.setState({showComponent:true});
};

render() {
    if (this.state.showComponent)
        return (
            <Alert />
        );
    else return null;
}

Этот компонент Оборачивает любую другую страницу в моем приложении, так что приложение может быть включено, чтобы показать предупреждение всегда. На этапе монтажа компонента я зарегистрировал прослушиватель, так что когда событие будет брошено в перехватчик ax ios, оно будет перехвачено там, а состояние showComponent будет установлено в true.

Как уже было сказано, этот код работает, но, поскольку я новичок в React, я хотел бы получить некоторые мнения об этом «шаблоне».

...