Какую библиотеку ajax следует использовать для моего приложения React/Flux? Мне нужно глобально обрабатывать ошибки (например, автоматически выходить из системы и перенаправлять на логин, если 401, аналогично службе $ http в Angular), и я хотел бы использовать обещания.
То, как я сейчас это делаю, представляет собой комбинацию из трех библиотек:
webutils.js
var Promise = require('bluebird');
module.exports = {
makeApiCall: function() {
return Promise.resolve($.get("http://makeyourapicall"));
}
};
actions.js:
var Reflux = require('reflux');
var WebUtils = require('web-utils.js');
var Actions = Reflux.createActions({
getDataFromServer: { asyncResult: true }
});
Actions.getDataFromServer.listenAndPromise(WebUtils.makeApiCall);
module.exports = Actions;
Объяснение:
asyncResult: true
в вызове createActions
создает "вложенное/асинхронное действие", которое вы можете прослушивать. Подробнее здесьlistenAndPromise
перехватывает обещание до вложенных completed
и failed
обратных вызовов на основе результатаВы можете использовать вложенные действия следующим образом:
Actions.getDataFromServer.complete.listen(res => console.log('success', res));
Actions.getDataFromServer.failed.listen(err => console.log('failed', err));
В этом смысле мы можем реализовать универсальный обработчик ошибок, подключая все события .failed
.
рефлюкс-ошибка-handler.js
var _ = require('lodash');
var Reflux = require('reflux');
var NotificationStore = require('../stores/NotificationStore');
/**
* Overall error handler for async actions
* @param err
*/
function handleError(err) {
console.error('Encountered error:', err);
NotificationStore.createErrorNotification(err);
}
/**
* Loops over refluxActions and attaches an error handler to all async actions
* @param refluxActions {Object} hash of the reflux actions ot generate
* @constructor
*/
var RefluxErrorHandler = function(refluxActions) {
_.forEach(refluxActions, func => {
if(func.failed) {
func.failed.listen(handleError);
}
});
return refluxActions;
};
module.exports.wrapRefluxActions = RefluxErrorHandler;
Чтобы использовать его в actions.js:
var Reflux = require('reflux');
var WebUtils = require('web-utils.js');
var RefluxErrorHandler = require('reflux-error-handler.js');
var Actions = Reflux.createActions({
getDataFromServer: { asyncResult: true }
});
Actions.getDataFromServer.listenAndPromise(WebUtils.makeApiCall);
module.exports = RefluxErrorHandler(Actions);