将 AngularJS 延迟承诺转换为 AngularX 可观察 JSOM答案

【问题标题】：Converting AngularJS deffered promise to AngularX observable for JSOM将 AngularJS 延迟承诺转换为 AngularX 可观察 JSOM
【发布时间】：2017-12-31 12:58:50
【问题描述】：

我正在将 AngularJS 应用程序转换为从 SharePoint 获取一些数据的 Angular 4。它使用 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;
  }

【问题讨论】：

标签： angularjs angular promise observable sharepoint-jsom

【解决方案1】：

您可以通过以下方式将 Promise 转换为 observables：

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

也可以在你返回承诺的底部尝试这个：

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

【讨论】：