Angular2 - 多个依赖的顺序 http api 调用

2024-04-16

我正在构建一个 Angular2 应用程序,其中一个组件需要进行多个 API 调用,这些调用依赖于之前的调用。

我目前有一项服务可以调用 API 来获取电视节目列表。对于每个节目,我需要多次调用不同的 API 来逐步检查该结构,以确定该节目是否存在于 Plex 服务器上。

API 文档是here https://github.com/Arcanemagus/plex-api/wiki/Plex-Web-API-Overview

对于每个节目,我需要进行以下调用并获取正确的数据来确定它是否存在:(假设我们有变量<TVShow>, <Season>, <Episode>)

http://baseURL/library/sections/?X-Plex-Token=xyz会告诉我:title="TV Shows" key="2"

http://baseURL/library/sections/2/all?X-Plex-Token=xyz&title=<TVShow>会告诉我:key="/library/metadata/2622/children"

http://baseURL/library/metadata/2622/children?X-Plex-Token=xyz会告诉我:index="<Season>" key="/library/metadata/14365/children"

http://baseURL/library/metadata/14365/children?X-Plex-Token=xyz会告诉我:index="<Episode>"这意味着我所经历的情节存在。

回复是json格式的,我删除了很多多余的文本。在每个阶段我需要检查是否存在正确的字段(<TVShow>, <Season>, <Episode>)以便它们可以用于下一次调用。如果没有,我需要返回该节目不存在。如果确实如此,我可能会想返回该节目的 ID。


我看过很多例子,包括承诺、异步和平面地图,但我不确定如何根据我见过的其他例子来解决这个问题。

  • 如何在 Angular2 中链接 Http 调用 https://stackoverflow.com/questions/34104638/how-to-chain-http-calls-in-angular2
  • Angular 2.0 和 Http http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http
  • Angular 2 - 当一个 Http 请求依赖于另一个 Http 请求的结果时该怎么办 https://stackoverflow.com/questions/37846368/angular-2-what-to-do-when-an-http-request-depends-on-result-of-another-http-re
  • Angular 2 使用可迭代数组链接 Http Get 请求 http://stack1.ocim.top/38517552/multiple-dependent-http-calls-angular-2-flattened-into-2-dimensional-array.html
  • Nodejs 异步:多个依赖的 HTTP API 调用 https://stackoverflow.com/questions/23141056/nodejs-async-multiple-dependant-http-api-calls
  • 如何使用“请求”和“异步”收集 NodeJS 上 Web API 的结果 https://stackoverflow.com/questions/19139650/how-to-gather-the-result-of-web-apis-on-nodejs-with-request-and-async?rq=1

这是我获取节目列表的方法。 (显示.service.ts)

export class ShowsHttpService {
    getShows(): Observable<Show[]> {
        let shows$ = this._http
            .get(this._showHistoryUrl)
            .map(mapShows)
            .catch(this.handleError);
        return shows$;
    }
}

function mapShows(response:Response): Show[] {
    return response.json().data.map(toShow);
}

function toShow(r:any): Show {
    let show = <Show>({
        episode: r.episode,
        show_name: r.show_name,
        season: r.season,
        available : false,    // I need to fill in this variable if the show is available when querying the Plex API mentioned above.
    });
    // My best guess is here would be the right spot to call the Plex API as we are dealing with a single show at a time at this point, but I cannot see how.
    return show;
}

这是组件的相关代码(shows.component.ts)

public getShows():any {
    this._ShowsHttpService
        .getShows()
        .subscribe(w => this.shows = w);
    console.log(this.shows);
}

奖励积分

以下是明显有趣但不必要的下一个问题:

  1. 第一个 API 查询将比等待所有其他查询发生要快得多(4 个查询 * ~10 显示)。是否可以返回初始列表,然后用available准备就绪时的状态。
  2. 第一次 Plex 调用获取key="2"只需要执行一次。它可以是硬编码的,但相反,它可以执行一次并被记住吗?
  3. 有没有办法减少API调用次数?我可以看到我可以删除显示过滤器,并在客户端上搜索结果,但这也不太理想。
  4. 每个节目的 4 个调用必须按顺序完成,但每个节目可以并行查询以提高速度。这是可以实现的吗?

任何想法将不胜感激!


不确定我是否完全理解你的问题,但这就是我所做的:

我进行第一个 http 调用,然后当订阅触发时,它调用completeLogin。然后我可以用它自己的完整功能触发另一个 http 调用并重复该链。

这是组件代码。用户已填写登录信息并按下登录:

onSubmit() {
   console.log(' in on submit');
   this.localUser.email = this.loginForm.controls["email"].value;
   this.localUser.password = this.loginForm.controls["password"].value;
   this.loginMessage = "";
   this.checkUserValidation();
}

checkUserValidation() { 
   this.loginService.getLoggedIn()
      .subscribe(loggedIn => {
         console.log("in logged in user validation")
         if(loggedIn.error != null || loggedIn.error != undefined || loggedIn.error != "") {
            this.loginMessage = loggedIn.error;
         }
      });

      this.loginService.validateUser(this.localUser);
}

这会调用loginservice ValidateUser方法

validateUser(localUser: LocalUser) {
   this.errorMessage = "";
   this.email.email = localUser.email;
   var parm = "validate~~~" + localUser.email + "/"
   var creds = JSON.stringify(this.email);
   var headers = new Headers();
   headers.append("content-type", this.constants.jsonContentType);

   console.log("making call to validate");
   this.http.post(this.constants.taskLocalUrl + parm, { headers: headers })
      .map((response: Response) => {
         console.log("json = " + response.json());
         var res = response.json();
         var result = <AdminResponseObject>response.json();
         console.log(" result: " + result);
         return result;
      })
      .subscribe(
         aro => {
            this.aro = aro
         },
         error => {
            console.log("in error");
            var errorObject = JSON.parse(error._body);
            this.errorMessage = errorObject.error_description;
            console.log(this.errorMessage);
         },
         () => this.completeValidateUser(localUser));
            console.log("done with post");
     }

completeValidateUser(localUser: LocalUser) {
   if (this.aro != undefined) {
      if (this.aro.errorMessage != null && this.aro.errorMessage != "") {
         console.log("aro err " + this.aro.errorMessage);
         this.setLoggedIn({ email: localUser.email, password: localUser.password, error: this.aro.errorMessage });
      } else {
         console.log("log in user");
         this.loginUser(localUser);
      }
   } else {
      this.router.navigate(['/verify']);
   }

}

在我的登录服务中,我调用授权服务,该服务返回可观察的令牌。

loginUser(localUser: LocalUser) {
   this.auth.loginUser(localUser)
   .subscribe(
      token => {
         console.log('token = ' + token)
         this.token = token
      },
      error => {
         var errorObject = JSON.parse(error._body);
         this.errorMessage = errorObject.error_description;
         console.log(this.errorMessage);
         this.setLoggedIn({ email: "", password: "", error: this.errorMessage });
      },
      () => this.completeLogin(localUser));
}

在授权服务中:

loginUser(localUser: LocalUser): Observable<Token> {
   var email = localUser.email;
   var password = localUser.password;

    var headers = new Headers();
    headers.append("content-type", this.constants.formEncodedContentType);

    var creds:string = this.constants.grantString + email + this.constants.passwordString + password;
    return this.http.post(this.constants.tokenLocalUrl, creds, { headers: headers })
         .map(res => res.json())
}

这段代码的要点是,首先调用登录服务的 validateUser 方法,根据返回信息,根据返回信息,如果有效,我调用登录服务的 loginUser 方法。只要您需要,这条链条就可以继续存在。您可以设置类级别变量来保存链中每个方法中所需的信息,以决定下一步要做什么。

还要注意,您可以在服务中订阅返回并在那里处理它,它不必返回到组件。

好的,这里是:

public getShows():any {
   this._ShowsHttpService
      .getShows()
      .subscribe(
         w => this.shows = w,
         error => this.errorMessage = error,
         () => this.completeGetShows());
}

completeGetShow() {

   //any logic here to deal with previous get;

   this.http.get#2()
      .subscribe(
         w => this.??? = w),
         error => this.error = error,
         () => this.completeGet#2);
}

completeGet#2() {

   //any logic here to deal with previous get;

   this.http.get#3()
      .subscribe(
         w => this.??? = w),
         error => this.error = error,
         () => this.completeGet#3);
}

completeGet#3() {

   //any logic here to deal with previous get;

   //another http: call like above to infinity....
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2 - 多个依赖的顺序 http api 调用 的相关文章

随机推荐

  • Perforce - 每次签到时都会收到电子邮件

    有没有办法让 Perforce 在每张支票上向您发送一封电子邮件到特定的存款机构 是的 输入 p4 user 查看您的用户配置 然后在 评论 下将您希望在签入时收到通知的仓库区域的文件规范放入其中 如下所示 Reviews depot my
  • 在 while 循环中使用枚举函数

    我有几种使用迭代来搜索正确答案的数学算法 这是一个例子 def Bolzano fonction a b tol 0 000001 while abs b a gt tol m a b 2 if sign fonction m sign f
  • 如何将 TreeViewer 单元格的一部分设为粗体?

    我目前想编写一个基于 JFace 的 Eclipse 编辑器TreeViewer 我添加了一个CellLabelProvider to the TreeViewer 如果我直接在update的方法CellLabelProvider对于粗体字
  • javascript中console.log和return有什么区别

    JavaScript 中 console log 和 return 有什么区别 他们都看到在终端上打印出东西 isPrime num if num i 0 return false for var i 2 i lt num i if num
  • 与 NSPersistentCloudKitContainer 的关系持久化

    我正在开发一个使用的应用程序NSPersistentCloudKitContainer在设备之间共享数据 核心数据模型具有多个实体 其中两个实体使用与其各自相反的关系进行连接 我遇到的问题是 当我将关系设置为nil云数据未更新 当我重新启动
  • 为什么我在部署容器时看到此错误:“错误:(gcloud.run.deploy) PERMISSION_DENIED:调用者没有权限”?

    假设我有一个cloudbuild yaml文件如下所示 还假设我可以在使用时手动运行和部署有问题的容器gcloud用于单独的功能 构建和运行 部署的时候第三步就出现错误ERROR gcloud run deploy PERMISSION D
  • Gmail 如何识别电子邮件签名(或者“识别电子邮件签名的最佳方式是什么?”)

    Gmail 会自动将看起来像签名的文本变成灰色 有人猜测它是如何做到这一点的吗 我注意到这取决于发件人姓名的存在 但我认为这只是故事的一部分 我之所以这么问 是因为我正在开发一个具有电子邮件界面的 Web 应用程序 并且我想在显示用户的电子
  • Python Pandas - 如何通过描述函数计算 25 个百分点

    对于数据框中的给定数据集 当我应用describe函数 我得到基本统计数据 包括最小值 最大值 25 50 等 例如 data 1 pd DataFrame One 4 6 8 10 columns One data 1 describe
  • 登录 Scala

    在 Java 中 日志记录的标准习惯用法是为记录器对象创建一个静态变量 并在各种方法中使用它 在 Scala 中 习惯用法似乎是使用 logger 成员创建 Logging 特征 并将该特征混合到具体类中 这意味着每次创建对象时 它都会调用
  • 如何根据方向改变屏幕布局?

    在肖像中我有 5 个图标 第一行有 4 个图标 第二行有 1 个图标 但在横向中 第五个图标必须适合第一行 怎么解决这个问题 对于纵向和横向位置使用不同的布局文件 使用layout land用于风景位置 当方向改变时 Android 会自动
  • 优化 MySQL 插入以处理数据流

    我正在使用高速数据流并执行以下步骤将数据存储在 MySQL 数据库中 对于每件新到货的商品 1 解析传入项 2 执行几次 INSERT ON DUPLICATE KEY UPDATE 我用过插入 重复密钥更新 http dev mysql
  • 查找给定范围内给定数字的整数个数的算法

    如果我以列表的形式得到完整的数字集list我想知道它们在给定范围内可以形成多少个 有效 整数 A B 我可以使用什么算法来有效地完成它 例如 给定一个数字列表 包含重复项和零 list 5 3 3 2 0 0 我想知道这个范围内可以组成多少
  • 为什么字体名称需要引号?

    据我所知 如果字体包含空格 则需要使用双引号或单引号 例如 font family Times New Roman Times font family Times New Roman Times 但在谷歌字体上 http www googl
  • Git:区分本地和远程标签

    如果远程存储库中有标签 我通常会在拉取时自动获取它们 当我删除创建的本地标签时 git tag d
  • Hudson 基于 URL 令牌构建

    我配置了一个 hudson 实例并创建了作业 创建构建时 我能够看到此选项 通过访问此 URL SecretTOKEN 触发构建 选项 现在 我无法在我创造的任何新工作中看到这一点 我是否缺少某些设置或配置 我所做的唯一更改是将 servl
  • C# 中的委托数组

    我正在尝试从委托数组调用委托函数 我已经能够创建委托数组 但是如何调用委托呢 public delegate void pd public static class MyClass static void p1 static void p2
  • Spring 提供静态内容,同时具有通配符控制器路由

    我的应用程序是在前端使用骨干和后端使用 spring 框架构建的 这是一个单一的 html 应用程序 路由由骨干网处理 因此我有一个具有以下结构的后端路由 RequestMapping value method RequestMethod
  • 如何调用maven默认生命周期

    如果我打电话 mvn clean install maven知道clean是一个生命周期 install是默认生命周期的一个阶段 如果我打电话 mvn deploy maven 将按顺序执行默认生命周期的所有阶段 有没有办法通过给出生命周期
  • Mac OS X:尝试链接(ld)到框架

    我正在阅读 Mark 和 Aaron 所著的 高级 Mac OS X 编程 我无法让一个终端语句正常工作 cc g o useadd F Adder build framework 加法器 useadd m 它位于第 45 页 第 3 章
  • Angular2 - 多个依赖的顺序 http api 调用

    我正在构建一个 Angular2 应用程序 其中一个组件需要进行多个 API 调用 这些调用依赖于之前的调用 我目前有一项服务可以调用 API 来获取电视节目列表 对于每个节目 我需要多次调用不同的 API 来逐步检查该结构 以确定该节目是