如何使用 Angular 9 http post 请求从 API 获得响应

Question

我正在使用 Postman 向 API 发出 POST 请求并将数据保存到数据库，我得到了响应 {message:"Contact created successfully"}。但是在 Angular 中我没有收到任何回复。我做错了什么？

我在下面提供了一段代码。

Angular 服务

 add(contactItem: any){
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })

    };
    
    const contactApiUrl = "url to api/addContact.php";

    return this.http.post(contactApiUrl,contactItem, httpOptions).pipe(
            map( (response: any) => { console.log(response); }),
            catchError(this.handleError)
          );

  }

Contact.component.ts

  //here from the form I pass the data to service add()
  onSubmit(contactData){
     console.log(contactData);
     this.contactService.add(contactData).subscribe();

     //this.contactLst = this.contactService.get();
  }

addContact.php

//more code here

// create the product
if($contact->create()){
  
    // set response code - 201 created
    http_response_code(201);
  
    // tell the user
    echo json_encode(array("message" => "Contact was created."));
}
// if unable to create the contact, tell the user
else{
  
    // set response code - 503 service unavailable
    http_response_code(503);
  
    // tell the user
    echo json_encode(array("message" => "Unable to create contact."));
}

欢迎任何帮助。

Answer 1

您实际上并没有返回响应。你只是在记录它：

add(contactItem: any){
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })

    };
    
    const contactApiUrl = "url to api/addContact.php";

    return this.http.post(contactApiUrl,contactItem, httpOptions).pipe(
            map( (response: any) => response ), // <- return response
            catchError(this.handleError)
          );

  }

要调用它，您需要指定 subscribe 回调中发生的事情：

//here from the form I pass the data to service add()
  onSubmit(contactData){
     console.log(contactData);
     this.contactService.add(contactData).subscribe( r => console.log(r) );

     //this.contactLst = this.contactService.get();
  }

如何使用 Angular 9 http post 请求从 API 获得响应

How to get response from API using Angular 9 http post request

php

angular-services

angular