Question

我遇到问题，如何使用2个不同的Api提交。当第一个Api返回成功，然后转到第二个Api。第一个Api成功，但第二个Api失败，因为数据变得不确定。

这是我的代码

public signupform(userData: SignupRequest): Observable <any> {
  return this.http.post('api/createorganisation').pipe(tap( // Log the result or error
    data => {
      if (data.status['message'] === 'Success.') {
        return this.http.post('api/createuser');
      }
    }
  ));
}

希望大家都能提供帮助预先感谢

Answer 1

要通过管道方式传递不同的render() { if (this.state.loading) { return <div>loading ...</div> } if (this.state.student===null) { return <div>No student was found ...</div> } return( <div> { this.state.student.map((student)=>{ return <> //React Fragment short syntax. <div>{student._id}</div> <div>{student.role_num}</div> <div>{student.first_name}</div> <div>{student.last_name}</div> <div>{student.marks}</div> </> }) } </div> ) }请求，应考虑使用管道运算符HttpClient。此外，由于您已经在switchMap的成功回调中，因此我不确定您的if语句是否必需。

您可以使用以下内容：

Observable

订阅此查询时，您将触发另一个查询，并获得第二个查询返回的结果。

希望有帮助！

Answer 2

如果您有两个API调用，请尝试使用switchMap()运算符：

import { map, switchMap } from 'rxjs/operators';

public signupform(userData: SignupRequest): Observable<any>{    
    return this.http.post('api/createorganisation')
        .pipe( 
             switchMap(organis => {
                 return this.http.post('api/createuser');
             })             
         );
}

更新：

要查看API是否返回了数据，可以对其进行记录：

public signupform(userData: SignupRequest): Observable<any>{    
    return this.http.post('api/createorganisation')
    .pipe( 
       switchMap(organis => {
         console.log('organis: ', organis.json()); // to see data of api/createorganisation
         return this.http.post('api/createuser');
       })             
    );
}

提交带有两个不同条件的Api的表单

2 个答案: