Angular2 http.post：使用订阅创建承诺答案

【问题标题】：Angular2 http.post: Create promise with subscribeAngular2 http.post：使用订阅创建承诺
【发布时间】：2017-12-12 19:14:03
【问题描述】：

我正在尝试创建一个函数，它返回一个 Promise 作为代码：(someprovider.ts)

postToPaymentApi(url:string, data:string, options:RequestOptions, order:Order):Promise<any>{
let result =  this.http.post(url, data, options).map(res => res.json())
  .subscribe(data => {
    // all my logic here!
    });
  }, error => {
    console.log(error)
  })

  return new Promise((resolve)=>{
    resolve(result)
  })

}

问题是，当我调用这个函数时，我没有得到数据，因为这个帖子需要几秒钟才能完成，而且我在帖子完成之前得到了承诺。

this.postToPaymentApi(url, data, options, order).then(data => {
    console.log(data);
  })

我做错了什么？

【问题讨论】：

不要.subscribe, .map 然后转换它.toPromise()。或者只是使用可观察的。
使用 .map 并订阅你正在使用 Observable，它是一个异步进程，你可以使用 *ngIf 来显示模板中的数据

标签： javascript angular typescript ionic2

【解决方案1】：

如果你想创建一个返回 promise 的函数，你的函数应该是：

postToPaymentApi(url:string, data:string, options:RequestOptions, order:Order):Promise<any >{
   return new Promise((resolve, reject) => {
          this.http.post(url, data, options)
           .map(res => res.json())
           .subscribe(data => {
             resolve(data);
            }
           }, error => {
             console.log(error)
             reject({error: error});
           });
        });
}

【讨论】：

【解决方案2】：

Andre，你想使用 toPromise operator 将 .map() 返回的 observable 转换为 promise。返回该运算符的结果

return http.post(...).map(...).toPromise()

现在返回了一个正确的承诺，所以调用代码可以这样使用它：

postToPaymentApi(...).then(
    data => console.log(data)
)

【讨论】：