Question

我应该将哪个 ajax库用于我的React / Flux应用程序？我需要全局处理错误（例如自动注销并重定向到登录，如果401;类似于Angular中的$ http服务），我想使用promises。

Answer 1

我目前正在这样做的方式是三个库的组合：

Reflux.js
Bluebird
的jQuery

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会创建一个您可以收听的“嵌套/异步操作”。 More Here
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);

Javascript ajax库支持全球事件

1 个答案: