Несколько фетч запросов?

Question

[sirhiiOlegovich]

есть екшн

@action
    getLogList = async (range, type) => {
        this.isLoading = true;
        try {
            const result = await Http.get(`${serverApi}/log-list?range=${range}&type=${type}`);
            console.log(result, 'result');
            this.chartsData[type] = result.data;
            this.isLoading = false;
            this.isError = false;
            this.errorMsg = null;
        } catch (e) {
            this.chartsData[type] = null;
            this.isLoading = false;
            this.isError = true;
            this.errorMsg = e;
        }
    };

В компонете нужно вызвать 3 екшена с разными данными, и поместить в стейт

useEffect(() => {
        getLogList('1', 'markeCap'),
        getLogList('1', 'newTotalSupply'),
        getLogList('1', 'marketCap'),
    }, [getLogList]);

Как правильно сделать ?

Answer 1

[Pavel Shvedov]

эвэйт Промис.ол([...])

Comments

[sirhiiOlegovich]

так ?

Promise.all([
        getLogList('1', 'markeCap'),
        getLogList('1', 'newTotalSupply'),
        getLogList('1', 'marketCap'),
        ]).then(allResponses => {

        })

Сама функция

@action
    getLogList = async (range, type) => {
        this.isLoading = true;
        try {
            const result = await Http.get(`${serverApi}/log-list?range=${range}&type=${type}`);
            console.log(result, 'result');
            this.chartsData[type] = result.data;
            this.isLoading = false;
            this.isError = false;
            this.errorMsg = null;
        } catch (e) {
            this.chartsData[type] = null;
            this.isLoading = false;
            this.isError = true;
            this.errorMsg = e;
        }
    };

[Pavel Shvedov]

Ну если без эвэйт, то примерно так, да

[sirhiiOlegovich]

Pavel Shvedov,
вот стор, в результате 3 екшена в компоненте запишут данные в стор ?

class DashboardStore {
    @observable isLoading = false;
    @observable isError = false;
    @observable errorMsg = null;
    @observable chartsData = {
        exchangeRate: null,
        newTotalSupply: null,
        marketCap: null
    };

>в результате таким образом должен выглядеть мой юзэффект или чего то не хватает ?

useEffect(() => {
        Promise.all([
            getLogList('1', 'markeCap'),
            getLogList('1', 'newTotalSupply'),
            getLogList('1', 'marketCap')
        ]);
    }, [getLogList]);

[Pavel Shvedov]

sirhiiOlegovich, https://stackblitz.com/edit/mobx-rec6pk?file=index.js