Как правильно вынести функцию с асинхронным запросом в отдельный модуль?

Question

[kova1ev]

Здравствуйте, изучаю реакт, никак не могу понять одной вещи.

У меня есть некоторое количество компонентов, которые отправляют асинхронные запросы на апи сервера. Запросы делаю используя функцию fetch. Получая ответ, меняют state и компонент перерисовывается. Суть в том, что во всех компонентах практически одинаковый код этих запросов, за исключением урла. Хотел сделать в отдельном файле функцию, которая в параметрах получала урл и возвращала ответ сервера, и потом её использовать во всех компонентах, но из-за того что запрос асинхронный, функция не работает, так как return выполняется раньше, чем приходит ответ от сервера.

на всякий случай приложу код одного из компонентов

class Test extends React.Component {

    state = {
        storages:[]
    }
    
    load_data = () => {
        fetch('/storages')
        .then(response => response.json())
        .then(data => this.setState({
          storages: data
        }));
    }

    render() {
        const storages = this.state.storages.map(function(item, index) {
            return (
                <tr key={index}><td>{item.name}</td><td>{item.adress}</td><td>{item.area}</td></tr>
            )
        });

        return (
            <React.Fragment>
                <button onClick={this.load_data}>Склады</button>
                <table>
                    <tr><th>Название</th><th>Адрес</th><th>Площадь(кв.м)</th></tr>
                    {storages}
                </table>
            </React.Fragment>
        );
    }
}

export default Test;

Функция load_data() во всех компонентах повторяется. Подскажите, плз, как правильно избавиться от дублирования?

Answer 1

[Rsa97]

Передавайте в свою функцию callback для перерисовки или селектор элемента, который нужно перерисовать.

Comments

[kova1ev]

Rsa97 , это как то вот так примерно?

load_data = (url, callback) => {
        fetch(url)
        .then(response => response.json())
        .then(data => callback(data));
}

[Rsa97]

kova1ev, Скорее как-то так:
.then(data => callback(data))

[kova1ev]

Rsa97, спасибо, работает))

Answer 2

[Владимир]

Предпочтительный вариант - почитать про redux и redux-saga или redux-thunk.
Второй вариант - обернуть в async await

Comments

[kova1ev]

Хорошо, спасибо!