Как использовать Axios в React

[Peter1010]

Жаль что статья по сути просто переписывание примера из мануала, и её польза сомнительна.
Так как не рассмотрена очень важная часть axios.interceptors.
И нет примерна той же JWT авторизации. Перевыпуска токина и повторение запроса с новым токином.

[IonianWind]

axios.get(apiUrl).then

catch забыли

[evg_abramovich]

Что-то больше похоже на статью "как в реальном проекте делать лучше не стоит".
Уже давно есть библиотека react-promise-trackerвсе статься сводится к:

import React from 'react';
import { trackPromise, usePromiseTracker } from 'react-promise-tracker';

const area = 'persons';
const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';

const App = () => {
    const { promiseInProgress } = usePromiseTracker({ area });
    const [ persons, setPersons ] = useState(null);

    useEffect(() => {
      trackPromise(axios.get(apiUrl), area).then(({ data }) => {
        setPersons(data);
      });
    }, [setAppState]);

    return (
      <div className="app">
          {promiseInProgress
            ? <div>Подождите, данные загружаются!</div>
            : <Component data={persons} /> }
      </div>
    );
  }

  export default App;

Причем const { promiseInProgress } = usePromiseTracker({ area }); можно вынести в отдельный компонент и передавать туда area. И не оборачивать его функцией на подобии OnLoadingUserData а просто использовать children.

[it-xp]

function OnLoadingUserData(Component) {
    return function LoadingPersonsData({ isLoading, ...props }) {
        if (!isLoading) return <Component {...props} />

        else return (
            <div>
                <h1>Подождите, данные загружаются!</h1>
            </div>
        )
    }
}

export default LoadingPersonsData

А ниче, что тут из модуля экспортируется функция, объявленная в замыкании другой функции?