将AngularJS的延迟承诺转换为AngularX可观察对象用于JSOM

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;
  }

- Florian Leitgeb

Answer 1

您可以通过以下方式将承诺转换为可观察对象：

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

您可以尝试在返回 promise 的底部进行此操作：

return Observable.fromPromise(deferred.promise);

那么你可以这样做：

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

你可以使用observables重新编写它，并创建一个返回新observable的服务：

   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());
            }
        );
    });
}

- rtn