Angular http post 请求总是发送一个空对象

标签 angular http

我正在尝试使用 Angular 发布一些数据,当我使用 Postbin 检查它时,我不断在响应中得到一个空对象。我在代码中的其他位置订阅了此函数,因此我确信请求正在处理:

使用 Postman 一切正常,但我看不出下面的代码有什么问题:

postRequest(order): Observable<any> {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    const data = {
      "data": {
        "ID": "1",
        "Name": "John",
        "Class": "Adventurer",
        "Items": [
          "641",
          "642",
          "643",
          "513",
          "512"
        ]
      }
    }
    return this.http.post('https://requestb.in/wjoscywj', { body: JSON.stringify(data) }, { headers: headers })
      .map(this.extractData)
      .catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    return body || {};
  }

  private handleError(error: any) {
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

最佳答案

我会调整一些东西:

 headers.append('Content-Type', 'application/json; charset=utf-8');

为了安全起见。

你确实想要 JSON.stringify。我通常在没有 {body: } 的情况下执行此操作 标题也一样。 所以你有

this.http.post('https://requestb.in/wjoscywj', JSON.stringify(data), headers);

有了 map 你就可以做到

map((resp:Response) => resp.json()) 

请记住,您必须订阅 Observable 才能开始工作。

就您而言,我倾向于使用带有签名的服务:

postRequest(order): Observable<Response> {
   //setup headers and do post here
}

这样,您在方法级别仍然具有类型安全性。

然后,在调用函数中进行 map 和订阅,如下所示:

this.postRequest(order)
  .map((resp:Response) => resp.json())
  .subscribe(data =>  { console.log(data);
                        this.data = data;
                      },
             error => { console.error(error)
                      },
             ()    => { // Finally
                      }
   )

订阅由三部分组成:成功、错误、最后。
Error 和 Final 是可选的。
如果只有 1 个语句,大括号 {} 是可选的。

关于Angular http post 请求总是发送一个空对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45213000/

相关文章:

angular - 在 Angular 6.x 库编译期间删除 console.log

javascript - 显示来自嵌套路由的组件数据 - Angular

http - Golang - 检查错误和推迟操作的正确顺序是什么?

php - 通过 PHP 伪造一个 $_POST

php - Angular 推送消息未显示

node.js - 在 AWS EC2 上部署 Angular 5 应用程序

AngularJs http请求 header 没有改变

angular - HTTP 心跳以避免长时间运行的 http 调用的连接断开

angular - 如何让图片留在容器内不溢出

angular - 在 Angular 的 http 订阅操作中使用 ngx-spinner