Angular - 对多个 HTTP 请求进行排序

Question

在我的 Angular 7 项目中，作为组件初始化的一部分，我正在运行一系列 HTTP 请求。每次请求后，我都会得到响应，然后运行下一个请求。

目前我已将 HTTP 请求放入服务中并从我的组件中调用它们。我的 HTTP 请求函数应用了额外的 RXJS 函数，包括超时和通过 .pipe 函数重复请求。错误处理在组件中完成。

要链接，在一个请求完成后，我会在另一个函数中调用下一个请求。我将需要第一个请求的响应数据来执行下一个响应。

问题是我目前的链接方式看起来非常困惑且难以理解。

是否有更好的方法来链接 HTTP 请求？

我知道有一个 rxjs fork 函数，但对如何实现它有点困惑，尤其是当我有错误处理和管道时。

注意:对于请求，错误的处理方式相同。

完整代码如下，提前致谢。

Component
formData: any;
style: any;
subscribers:any[];

constructor(private webService: WebService){}

ngOnInit(){
 let id: number = 1;
 this.getFormData(id);

}

getFormData(id: number) {
 this.webService.getFormData(id)
 .subscribe(
   data => { 
     this.formData = data;
     this.getFormStyle(this.formData.style_id);

   },
     err => {
      // Error handler
     }
  )
}

getFormStyle(id: number) {
 this.webService.getFormStyle(id)
 .subscribe(
   data => { 
     this.style = data;
     this.getFormSubscribers(this.formData.subscriber_id);

   },
     err => {
      // Error handler
     }
  )
}

getFormSubscribers(id: number) {
 this.webService.getFormSubscribers(id)
 .subscribe(
   data => { 
     this.subscribers = data;
   },
     err => {
      // Error handler
     }
  )
}

网络服务

表单数据 API

getFormData(id: number): any {
 let headers: any = this.headerService.getHeaders();
 return this.http.get('www.test.com/form/data/' + id, {headers: headers})
    .pipe(timeout(25000))
    .pipe(retryWhen(errors => errors
      .pipe(map((err, index) => {
        // No Error, throw immediately
        if (!err) {
          throw err;
        } 
        // Caught error (ie not disconnected), throw immediately
        if (err.status !== 0) {
          throw err;
        }
        // Disconnection repeat to limit
        if (index === 2) {
          throw err;
        }
        return err;
      }))
      .pipe(delay(2000))))
    .pipe(map(res => res.json()))
}

表单样式 API

getFormStyle(style_id:number) {
     let headers: any = this.headerService.getHeaders();
     return this.http.get('www.test.com/form/style/' + style_id, {headers: headers})
        .pipe(timeout(25000))
        .pipe(retryWhen(errors => errors
          .pipe(map((err, index) => {
            // No Error, throw immediately
            if (!err) {
              throw err;
            } 
            // Caught error (ie not disconnected), throw immediately
            if (err.status !== 0) {
              throw err;
            }
            // Disconnection repeat to limit
            if (index === 2) {
              throw err;
            }
            return err;
          }))
          .pipe(delay(2000))))
        .pipe(map(res => res.json()))

}

表单订阅者 API

getFormSubscribers(subscriber_id:number) {
     let headers: any = this.headerService.getHeaders();
     return this.http.get('www.test.com/form/subscribers/' + subscriber_id, {headers: headers})
        .pipe(timeout(25000))
        .pipe(retryWhen(errors => errors
          .pipe(map((err, index) => {
            // No Error, throw immediately
            if (!err) {
              throw err;
            } 
            // Caught error (ie not disconnected), throw immediately
            if (err.status !== 0) {
              throw err;
            }
            // Disconnection repeat to limit
            if (index === 2) {
              throw err;
            }
            return err;
          }))
          .pipe(delay(2000))))
        .pipe(map(res => res.json()))

}

Answer 1

您可以尝试 async await 来对 api 调用进行排序。

Component
formData: any;
style: any;
subscribers:any[];

constructor(private webService: WebService){}

ngOnInit(){
 let id: number = 1;
 this.getFormData(id);

}

async getFormData(id: number) {
 this.webService.getFormData(id)
 .subscribe(
   data => { 
     this.formData = data;
     console.log('start');
     await this.getFormStyle(this.formData.style_id);
     await this.getFormSubscribers(this.formData.subscriber_id);
     console.log('end'); // this line will compile once all the await function compilation will completed.
   },
     err => {
      // Error handler
     }
  )
}

getFormStyle(id: number) {
 return new Promise ((resove, reject) => {
    this.webService.getFormStyle(id)
    .subscribe(
     data => { 
       this.style = data;
       resolve(''); // if you want to pass the data you can pass that data in to resolve 
     },
     err => {
      // Error handler
     }
  )
 })
}

getFormSubscribers(id: number) {
 return new Promise ((resolve, reject) => { this.webService.getFormSubscribers(id)
 .subscribe(
   data => { 
     this.subscribers = data;
     resolve(''); // if you want to pass the data you can pass that data in to resolve 
   },
     err => {
      // Error handler
     }
  ))
}

希望对你有所帮助。