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

WebService

表单数据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
     }
  ))
}

希望它能对您有所帮助。

Angular-排序多个HTTP请求

1 个答案: