Обработка ошибок AJAX в React.componentDidMount

Question

Обработка ошибок AJAX в React.componentDidMount

0

Согласно Facebook, лучший способ загрузить исходные данные для компонента React - сделать запрос AJAX в функции componentDidMount:

https://facebook.github.io/react/tips/initial-ajax.html

что-то вроде:

           componentDidMount: function () {
                var self = this;
                Store.fetch()
                    .done(function () {
                        if (self.isMounted()) {
                            self.setState(getLatestState());
                        }
                    })
                    .fail(function (err) {
                        throw err;
                    }).always(function(){
                        Store.addChangeListener('rc-listen',self._onChange);
                    });
                },

Каков наилучший способ обработки ошибок в этом случае? Поскольку AJAX является асинхронным, не должен ли компонентDidMount принимать обратный вызов в качестве аргумента?

Alexander Mills 10 сен. 2015, в 01:10

Источник

1

Если вы на мгновение забудете о реализации, что бы хотел видеть пользователь, если запрос не выполнен? Пустой экран, сообщение об ошибке? Чтобы справиться с этим, вы можете просто установить состояние «загрузка не удалась» и условно показать сообщение об ошибке.
David Gilbertson 10 сен. 2015, в 03:39
0

Дэвид, да, но это означает, что у меня одинаковая логика ошибок во всех моих функциях componentDidMount. С обратным вызовом я могу обработать все ошибки с помощью одного и того же кода. Донтча думаешь?
Alexander Mills 16 сен. 2015, в 21:03
1

Если вам нужен AJAX-запрос в каждом отдельном компоненте, но вы хотите поделиться обработкой ошибок, вы можете передать метод из родительского компонента, а затем в каждом компоненте вызвать this.props.handleAjaxError(err) или любой другой. Но я должен задаться вопросом, не лучше ли вам поместить все ваши AJAX-запросы в один компонент (или выполнить рендеринг на стороне сервера и заполнить хранилище, если это вариант для вас)
David Gilbertson 17 сен. 2015, в 00:12

Показать ещё 1 комментарий

Теги:

javascript

jquery

reactjs

ajax

1 ответ

Ещё вопросы

Если вы на мгновение забудете о реализации, что бы хотел видеть пользователь, если запрос не выполнен? Пустой экран, сообщение об ошибке? Чтобы справиться с этим, вы можете просто установить состояние «загрузка не удалась» и условно показать сообщение об ошибке.
Дэвид, да, но это означает, что у меня одинаковая логика ошибок во всех моих функциях componentDidMount. С обратным вызовом я могу обработать все ошибки с помощью одного и того же кода. Донтча думаешь?
Если вам нужен AJAX-запрос в каждом отдельном компоненте, но вы хотите поделиться обработкой ошибок, вы можете передать метод из родительского компонента, а затем в каждом компоненте вызвать this.props.handleAjaxError(err) или любой другой. Но я должен задаться вопросом, не лучше ли вам поместить все ваши AJAX-запросы в один компонент (или выполнить рендеринг на стороне сервера и заполнить хранилище, если это вариант для вас)

Jose Mato · Answer 1 · 2015-09-09T20-46-00.000Z

Во-первых, когда вы используете componentDidMount, компонент был вставлен в DOM и готов к использованию (добавление событий для элементов, доступ к элементам dom,...). Итак, компонент на этом этапе всегда монтируется.

Во-вторых, если запрос ajax является успешным, вы изменяете состояние, чтобы показывать обновленные данные. Но если запрос ajax терпит неудачу, вы можете изменить состояние для отображения и сообщение об ошибке пользователю (например, и, если хотите, отправить сообщение об ошибке на ваш сервер для сохранения истории ошибок).

Я согласен, это не имеет особого смысла, но документы React предлагают использовать «if (this.isMounting ())», посмотрите на ссылку в OP
В любом случае, привет @AlexMills, эту функцию «isMounting» можно было бы удалить в будущем: «Она может быть полностью удалена в будущей версии React». (из моего случая у меня никогда не было проблем, не используя его на componentDidMount)