将AngularJS的承诺转换为JSOM的AngularX observable

时间:2017-07-25 14:18:26

标签: angularjs angular promise observable sharepoint-jsom

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

我想从服务器获取带有executeQueryAsync()的数据,并将其存储在我的服务中的observable中。我必须从旧版本(不是来自我)转换的代码如下。现在,在将其转换为我的服务时,我很难理解语法。我绝对没有计划如何将其转换为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;
  }

1 个答案:

答案 0 :(得分:1)

You can convert promises to observables by doing:

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

Could also try this at the bottom where you return a promise:

return Observable.fromPromise(deferred.promise);

Then you could do:

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

Also you could just re-write it using observables and create a service that returns a new 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());
            }
        );
    });
}