Показать загрузчик с Axios и React (возможно, Redux) - PullRequest
Новая
       16

Показать загрузчик с Axios и React (возможно, Redux)

0 голосов
/ 31 мая 2019

Моя цель - показать загрузчик при вызове http.Я хочу сделать это глобально. Это означает, что когда любой компонент вызывает какой-либо API, он автоматически показывает счетчик, предпочтительно без дополнительного кода для управления счетчиком.

Я использую реагирование и аксиос.Я знаю о перехватчиках аксиоса.

Мое настоящее строение: 

<Component App>
    <Component A />
    <Component B />
    <Loading Component>
</Component App>

Я не знаю, возможно ли это в ответ, но я пытался создать общий класс для реализации базыинформация о сервисе, например, baseUrl и перехватчик http.Поэтому, когда необходимо вызвать службу API, я создаю специализированный класс, используя общий класс, и концентрирую там все методы api из этой концепции, а затем использую базовый класс для вызова метода axios get, post и т. Д.Итак, перехватчик появляется и показывает счетчик перед запросом и скрывается после запроса.

Идея состоит в том, чтобы компонент вызывал специализированный класс для вызова API и отображал счетчик до тех пор, пока запрос не будет запущен.

Я думаю использовать избыточность, чтобы сделать состояние глобальным, но я не знаю, возможно ли реализовать в классе (API Class Base и Specialized API Class)

Мои вопросы: - Является ли этоможно использовать эту архитектуру?- Если да, то как реализовать и использовать с этим приставку?- Имеет ли право использовать класс или лучше использовать компонент для реализации базового класса обслуживания и специализированного класса?

Компонент приложения: 

class App extends Component {

  constructor(props) {
      super(props);

      this.state = {
          rows: []
      };
  }

  componentDidMount() {
var service = new specializedService();

     var response = 

 specializedService.someAPIMethod(1).then((res) => {
           this.setState({
               rows: res.data
           });
     });
}

render() {
return (
        <div className="App">
                <Component A rows={this.state.rows} />
                <Component B rows={this.state.rows}/>
                <Loading />
        </div>
    );
  }

specialService: 

import serviceBase from "./serviceBase";

class specializedService {

    someAPIMethod(id) {
        return serviceBase.get('someMethod/' + id);
    };

}

serviceBase: 

import axios from "axios";

const serviceBase = () => {

    const api = axios.create({
        baseURL: 'https://xxxxx.xxxxx.com/xxxxxx/'
    });

    api.interceptors.request.use(async (config) => {
        try{
            // In this moment, show the spinner
            // showLoading();
        }
        catch(e)
        {
            alert('Error request' + e);
        }

        return config;
    });

    api.interceptors.response.use(async (config) => {
        try {
            // In this moment, hide the spinner
            // hideLoading();
        }
        catch(e)
        {
            alert('Error response' + e);   
        }

        return config;
    });

    return api;
};

export default serviceBase;

Я сделал простой пример, чтобы проиллюстрировать ситуацию, но я не подключаю избыточность https://repl.it/@DiegoFerreira1/LoadingSpinnerApp

Ответы [ 3 ]

0 голосов
/ 31 мая 2019

Я думаю, что лучшим способом добиться этого было бы использование приставок.у вас может быть какой-то редуктор «статуса запроса» и значение в вашем магазине, которое указывает, отправляется ли запрос.

Псевдокод: 

const sendRequest = async (req) {
  dispatch({type: "REQUEST_SENT"});
  const res = await axios.get(req);
  dispatch({type: "REQUEST_SUCCEEDED", payload: res});
}

И в зависимости отдействие, при котором вы переключаете значение статуса вашего запроса в вашем магазине, повторно визуализируя ваши компоненты.

0 голосов
/ 03 июня 2019

это очень удобно с использованием редуксов и thunk.

, но вы можете использовать такие хакеры, как 

this.state = {
 rows: [],
 isLoading: false,
}

apiCallFunction = () => {

 this.setState(prevState => ({ isLoading: !prevState.isLoading }) // to be true..

 // api call..
 // upon response success => 
 this.setState(prevState => ({
   isLoading: !prevState.isLoading, // to be false..
   rows: prevState.rows = response json,
 })
}

и при рендеринге 

render () {
 return (
  {isLoading && <Spinner />}
  {... handle the rest} 
 )
}
0 голосов
/ 31 мая 2019

Вы можете попробовать использовать реагирует контекст и поделиться методом, который изменит видимость вашего Loading компонента.

...