angularjs - 将 AngularJS 延迟 promise 转换为 JSOM 的 AngularX observable

Question

我正在将 AngularJS 应用程序转换为 Angular 4，它从 SharePoint 获取一些数据。它使用 JSOM 并为此使用executeQueryAsync() 方法。

我想使用executeQueryAsync()从服务器获取数据并将其存储在我的服务中的可观察对象中。我必须从旧版本(不是我的)转换的代码如下。现在，当我将其转换为我的服务时，我在语法上遇到了困难。我完全没有计划如何将其转换为 Angular 4。

  getAllStatusReps($scope) {
    const deferred = $q.defer();

    const ctx = SP.ClientContext.get_current();
    const web = ctx.get_web();

    const statusList = web.get_lists().getByTitle(this.statusListName);
    const twitterList = web.get_lists().getByTitle(this.twitterListName);

    const statReps = statusList.getItems(this.getQueryForAllStatusReps());
    const twitReps = twitterList.getItems(this.getQueryForAllStatusReps());
    const queryText = `
      <View>
        <RowLimit>1</RowLimit>
        <ViewFields>{0}</ViewFields>
        <Query>
          <Where><IsNotNull><FieldRef Name=\'EPMStatusDate\' /></IsNotNull></Where>
          <OrderBy><FieldRef Name=\'ID\' Ascending= \'False\' /></OrderBy>
        </Query>
      </View>`;

    const statCamlQuery = new SP.CamlQuery();
    statCamlQuery.set_viewXml(String.format(queryText, this.getViewFields(true, false)));
    const lastStatRep = statusList.getItems(statCamlQuery);

    const twitCamlQuery = new SP.CamlQuery();
    twitCamlQuery.set_viewXml(String.format(queryText, this.getViewFields(false, false)));
    const lastTwitRep = twitterList.getItems(twitCamlQuery);

    ctx.load(statReps);
    ctx.load(twitReps);

    ctx.load(lastStatRep);
    ctx.load(lastTwitRep);

    ctx.executeQueryAsync(
      function () {
        deferred.resolve({
          statReps: statReps,
          twitReps: twitReps,
          lastStatRep: lastStatRep,
          lastTwitRep: lastTwitRep
        });
      },
      function (sender, args) {
        deferred.reject('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
      }
    );

    return deferred.promise;
  }

Answer 1

您可以通过执行以下操作将 promise 转换为可观察量:

  const $thingWhichYouCanSubscribeTo = Observable.fromPromise(serviceOrThingThatReturnsPromise())

也可以在返回 promise 的底部尝试此操作:

return Observable.fromPromise(deferred.promise);

那么你可以这样做:

getAllStatusReps($scope).subscribe(()=>{...}, ()=>{...})

您也可以使用可观察值重写它并创建一个返回新可观察值的服务:

   getAllStatusReps($scope)
{
    return new Observable(observer =>
    {
        const ctx = SP.ClientContext.get_current();
        const web = ctx.get_web();
        const statusList = web.get_lists().getByTitle(this.statusListName);
        const twitterList = web.get_lists().getByTitle(this.twitterListName);
        const statReps = statusList.getItems(this.getQueryForAllStatusReps());
        const twitReps = twitterList.getItems(this.getQueryForAllStatusReps());
        const queryText = `
      <View>
        <RowLimit>1</RowLimit>
        <ViewFields>{0}</ViewFields>
        <Query>
          <Where><IsNotNull><FieldRef Name=\'EPMStatusDate\' /></IsNotNull></Where>
          <OrderBy><FieldRef Name=\'ID\' Ascending= \'False\' /></OrderBy>
        </Query>
      </View>`;
        const statCamlQuery = new SP.CamlQuery();
        statCamlQuery.set_viewXml(String.format(queryText, this.getViewFields(true, false)));
        const lastStatRep = statusList.getItems(statCamlQuery);

        const twitCamlQuery = new SP.CamlQuery();
        twitCamlQuery.set_viewXml(String.format(queryText, this.getViewFields(false, false)));
        const lastTwitRep = twitterList.getItems(twitCamlQuery);

        ctx.load(statReps);
        ctx.load(twitReps);

        ctx.load(lastStatRep);
        ctx.load(lastTwitRep);

        ctx.executeQueryAsync(
            function ()
            {
                observer.next({
                    statReps: statReps,
                    twitReps: twitReps,
                    lastStatRep: lastStatRep,
                    lastTwitRep: lastTwitRep
                });
            },
            function (sender, args)
            {
                observer.error('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
            }
        );
    });
}