javascript - 公开函数并返回对象

Question

我正在尝试创建一个 ajaxHelper 模块，该模块应该能够公开一定数量的函数，并且当调用它们时，应该返回一个辅助对象，该对象具有从 AJAX 调用检索的数据或与该 AJAX 相关的错误打电话。

以下是我的想法:

define("helpers-ajaxDataRetriever", ["jquery"], function ($) {

    var helper = {};

    helper.getIndexData = function() {
        fnIndexData();
        return helper;
    }

    var fnIndexData = function () {
        $.ajax({
            url: nwatchBaseUrl + '/api/HomeApi/NodeSummary'
        }).success(function (returnedData) {
            helper.success = true;
            helper.data = returnedData;
        }).fail(function (jqXHR, textStatus) {
            helper.success = false;
            helper.error.jqXHR = jqXHR;
            helper.error.textStatus = textStatus;
        });
    }

});

然后，我希望导入此 ajaxHelper 的其他模块能够调用该函数(例如 getIndexData)，该函数最终会填充帮助程序对象，然后能够引用各种属性，例如 bool 成功、数据，或错误对象。

我该如何去做呢？

Answer 1

为了使其按照您期望的方式工作，模块必须返回您希望向外界公开的属性(以便其他模块使用它)。

由于 ajax 是异步的，因此最好使用回调来处理此类场景，而不是直接访问变量。因为您不知道 ajax 调用何时会成功完成并返回数据。

define("helpers-ajaxDataRetriever", ["jquery"], function($) {

  var helper = {};
  // you will pass in the options
  // which will contains the success and error 
  // callbacks, along with additional props
  // that you wanna pass in and use
  helper.getIndexData = function(options) {
    fnIndexData(options);
  }

  var fnIndexData = function(options) {
    $.ajax({
      url: options.nwatchBaseUrl + '/api/HomeApi/NodeSummary'
    }).success(function(returnedData) {
          options.success && options.success.apply(null, arguments);
    }).fail(function(jqXHR, textStatus) {
       options.error && options.error.apply(null, arguments);
    });
  }

  // You return the object, which are the public methods
  // or properties which you wanna expose when this module is used
  return {
    getIndexData: getIndexData
  }
});

// This is when you wanna use the above exposed function
// in any module
define("use-ajax", ["helpers-ajaxDataRetriever"], function(customAjax) {

    var options = {
        success: function(data) {
            console.log('success');
            // use the data
        }, error: function(jqXHR, textStatus) {
             console.log('failure');
             // you will have access to the 
             // arguments of the error function here
        },
        nwatchBaseUrl: 'https://google.com/'
    }

    customAjax.getIndexData(options);
});

由于我们只想在上面的示例中公开 getIndexData，因此我们可以完全摆脱辅助命名空间，只返回函数定义。

您还可以使用 promise 的概念来实现保存。