在 Angular 中使用 Observable 进行 http post 同步答案

【问题标题】：make http post synch using Observable in Angular在 Angular 中使用 Observable 进行 http post 同步
【发布时间】：2018-11-06 02:05:18
【问题描述】：

我正在尝试实现这一点，但需要一些帮助（我是新手）。

我现在有，

constructor(http: HttpClient, private cvservice: CvService) {
const req = http.post<any>('url', [{
            "name": "ids",
            "license": "GPL version 2"
}])
  .subscribe(
    res => {
    console.log(res);
    var resp = res.Results[0].results.map(x => {
            return {cvid: x.ID, severity: x.CVSS };
    } );
   this.data = [...resp];
    },
    err => {
      console.log("Error occured");
    }
  );
}

这很好，除了我需要使 http.post 同步（在继续之前需要 Results[0]）并且我正在使用来自 How to synchronise Angular2 http get? 的建议。

我已将服务修改为，

export class CvService {
constructor(private http: HttpClient) {
}
url = 'foo';
getIds():Observable<any[]> {
const url='xxx';
return this.http.post(url, [{
            "name": "ids",
            "license": "GNU General Public License GPL version 2"
        }])
        .map(
            res =>  {
                res.Results[0].results.map( x => {
                   return {cvd: x.ID, severity: x.CVSS };
}));
}
}
}

但我认为这种语法是错误的。这会产生编译错误。有人可以在这里澄清使用地图功能的正确方法吗？

【问题讨论】：

你使用的是什么版本的 rxjs？（请记住，正如您链接到的帖子所指出的那样，这不会使其同步，但您不希望它同步。您可以使用 HTTP 调用的异步性质)
我认为您使用的是 rxjs 6+，为此您需要使用管道运算符 .pipe(map(....))，如果要链接运算符，请使用 , 即 .pipe(map(...), tap(...), ...)
是的；我正在使用 rxjs 6+。我已经使用 .pipe(map(..)) 实现了这一点，但现在我需要以特定顺序链接多个 http 请求。我必须解析一个的输出以作为输入数据传递给下一个。有这方面的例子吗？

标签： angular http post observable synchronous

【解决方案1】：

从 rxjs 导入地图并像这样在管道中使用它

return this.http.post(URL, Object)
 .pipe(map(data) => {
    return data['result'].map(res => {
   // Here You can return the entire res, or just the properties you want
   // EX: --> return res OR --> return res.cvd
   });
});

另外，把物体放在外面

let cv = [{
  name: "ids",
  license: "GNU General Public License GPL version 2"
}];

你可以像这样使用它

return this.http.post(URL, cv);

【讨论】：

【解决方案2】：

你可以这样实现：

服务

saveUser(): Observable<any> {
    const data = [{"name": "ids", "license": "GNU General Public License GPL version 2"}];

    // For Angular v5 below
    this.http
      .post(url, data)
      .map(res => res.json());       // or .map(res => res), depends what your fetching with

    OR you can pipe it out (Angular 6+)

    this.http
      .post(url, data)
      .pipe(map(({ Results }: any) => Results[0].results.map(item => ({cvid: item.ID, severity: item.CVSS }))));

    // Based from you code when you accessed it this way: res.Results[0].results.map( x => {return {cvd: x.ID, severity: x.CVSS };
}

组件

this.userService
   .saveUser()
   .subscribe(data => console.log(data));

已创建 Stackblitz demo 供您参考 - 这使用不同的数据和模拟 POST API 仅用于演示目的。

【讨论】：

这很好用。快速跟进。我需要按特定顺序链接一些这样的请求。我应该按照我希望它们执行的顺序调用这些函数吗？ (saveUser1(), 解析 output1, saveUser2(), 解析 output2, ...)。
是的，当您想以有序的方式实现它时 - 您应该使用您希望管道函数执行的顺序来指定它。如果可以 (saveUser1(() => parseOutput1), saveUser2(() => parseOutput2)) 仅在管道中使用 2 个方法而不是 4 个方法，那该多好。
介意你投赞成票吗？如果我的每个回答都可以帮助您解决您发布的原始问题？这将是一个很大的帮助，谢谢:)
我试过 tp upvote；这似乎不算数，因为我没有足够的代表。 :(