使用Angular HttpClient解析服务器的Http请求

时间:2018-07-23 18:15:33

标签: angular ionic-framework post httprequest

我试图使用解析服务器的REST API,因此他们在文档中写道: 要在Parse上创建一个新对象,请将POST请求发送到包含该对象内容的类URL。例如,创建上述对象:

curl -X POST \
-H "X-Parse-Application-Id: ${APPLICATION_ID}" \
-H "X-Parse-REST-API-Key: ${REST_API_KEY}" \
-H "Content-Type: application/json" \
-d '{"score":1337,"playerName":"Sean Plott","cheatMode":false}' \
https://YOUR.PARSE-SERVER.HERE/parse/classes/GameScore

我对其进行了测试,并且可以正常工作,因此我想通过Angular HttpClient使用此方法,然后我编写了这段代码:

let url = 'https://parseapi.back4app.com/classes/test';
const httpOptions = {
headers: new HttpHeaders({

  'X-Parse-Application-Id': '6mK3kDvzuLeyJojS9yRGYr6JxmuDtapGhwmUflqy',
  'X-Parse-REST-API-Key': '########################################',
  'Content-Type':  'application/json'
 })
 };
    let params = new HttpParams();
    params = params.set('score', '1337');
    params = params.append('playername', 'mohy');
    this.httpClient.post(url,params,httpOptions).subscribe(data =>{
      console.log(data);

    },err => {
      alert(err.message);
    });

}

使用curl时,它可以正常工作,但是如果使用HttpClient,则会出现以下错误:https://parseapi.back4app.com/classes/test的Http失败响应:400错误的请求

我该如何解决?

1 个答案:

答案 0 :(得分:2)

  

HttpParams对象序列化为编码字符串URL-query-string   (?score=1337&playername=mohy)   格式,这是内容类型提到的无效json格式。

let url = 'https://parseapi.back4app.com/classes/test';
const httpOptions = {
 headers: new HttpHeaders({
   'X-Parse-Application-Id': '6mK3kDvzuLeyJojS9yRGYr6JxmuDtapGhwmUflqy',
   'X-Parse-REST-API-Key': '########################################',
   'Content-Type':  'application/json'
  })
 };

let body = {
  score: '1337',
  playername: 'mohy'
 }

this.httpClient.post(url,JSON.stringify(body),httpOptions).subscribe(data =>{
   console.log(data);
 },err => {
      alert(err.message);
 });
}

如果您想使用get方法并将参数作为 URL-query-string

传递
 let params = new HttpParams();
    params = params.set('score', '1337');
    params = params.append('playername', 'mohy');

    this.httpClient.get(url,{params},httpOptions).subscribe(data =>{
      console.log(data);
    },err => {
      alert(err.message);
    });