时间戳

首页 > 解决方案 > 如何使承诺在视图中解析为对象？

angularjs - 如何使承诺在视图中解析为对象？

问题描述

我正在尝试包装第三方库以返回一个对象，该对象解析为可以在视图中显示的对象，类似于 $resource() 的工作方式。我知道我可以在 promise 上手动执行 .then() 然后设置值，但我希望结果能够无缝返回，类似于我可以执行的操作：

this.Value = $resource("/someresource").get();

我将如何更改以下 SomeThirdPartyFunction() 以返回在视图中解析的对象。

这是我正在尝试做的一个例子：

angular.module('testApp', []).controller('TestController', function ($timeout, $q) {
    var TestController = this;
    var SomeThirdPartyFunction = function () {
        var Deferred = $q.defer();
        var Promise = Deferred.promise;

        $timeout(function () {
            Deferred.resolve("abcd");
        }, 3000);

        return Promise;
    };

    TestController.Value = SomeThirdPartyFunction();

    /* I don't want to do this:
    SomeThirdPartyFunction().then(function(Value) {
      TestController.Value = Value;
    });*/
});

这是一个笨蛋：https ://plnkr.co/edit/HypQMkaqXmFZkvYZXFXf?p=preview

我看到的每个使用 Promise 的示例都只是包装了 $http 调用，但我还没有看到任何调用第三方库的示例，这些库返回解析为对象的 Promise。

标签： angularjsangular-promisengresource

解决方案

来自AngularJS 文档：

重要的是要意识到调用 $resource 对象方法会立即返回一个空引用（对象或数组取决于 isArray）。从服务器返回数据后，现有参考将填充实际数据。

因此，您可以执行以下操作，而不是返回承诺：

  var SomeThirdPartyFunction = function() {
    var getAComplextObject = function() {
      return {
        number: 42,
        method: function() {
          return this.number + 1;
        }
      };
    };

    var returnValue = {};

    $timeout(function() {
      console.log("Resolved!");
      Object.assign(returnValue, getAComplextObject());
    }, 1000);

    return returnValue;
  };

你可以将它包装在一个 Promise 中，并将 Promise 作为返回值的一部分，这样做你可以使它成为 thenable（又名 Promise）

推荐阅读