Angular 12 Tutorial - Http Client Programming

In this chapter, we are going to learn how to use the HTTP requests methods, including:

  • HTTP GET

  • HTTP DELETE

  • HTTP PATCH

  • HTTP POST

  • HTTP PUT

 

HTTP GET

The HTTP GET method is used when requesting or retrieving data from a particular resource in a server. Using this method, you can retrieve any resource or information that is identified using a request-URL.

The following code snippet illustrates the syntax of the HTTP GET method

get(url: string, 
      options: {
          headers?: HttpHeaders | { [header: string]: string | string[]; };
          params?: HttpParams | { [param: string]: string | string[]; };
          observe?: "body|events|response|";
          responseType: "arraybuffer|json|blob|text";
          reportProgress?: boolean; 
          withCredentials?: boolean;}
     ): Observable<>

 

 

HTTP DELETE

You can use this method to delete a specified resource from the server. The requests do not alter when you use this method, as they do with HEAF and GET results. Using the DELETE request, send the message body. As a result, some servers may refuse this request. You will, however, be able to submit the data to the server.

This approach is safe for users to use because it does not change the server's status. The syntax of the HTTP Delete request is shown in the excerpt below

delete(url: string, 
      options: {
          headers?: HttpHeaders | { [header: string]: string | string[]; };
          params?: HttpParams | { [param: string]: string | string[]; };
          observe?: "body|events|response|";
          responseType: "arraybuffer|json|blob|text";
          reportProgress?: boolean; 
          withCredentials?: boolean;}
     ): Observable<>

 

HTTP PATCH

You may wish to make some partial adjustments to the resources submitted to the server to increase compatibility and resolve any issues. The HTTP PATCH method enables you to make partial changes to a specific resource. HTTP PATCH, like a software patch, offers a set of instructions for changing the resources.

patch(url: string, 
     body: any, 
     options: { 
        headers?: HttpHeaders | { [header: string]: string | string[]; }; 
        observe?: "body|events|response|"; 
        params?: HttpParams | { [param: string]: string | string[]; }; 
        reportProgress?: boolean; 
        responseType: "arraybuffer|json|blob|text"; 
        withCredentials?: boolean; 
     }
): Observable

 

HTTP PUT

The HTTP PUT method allows you to replace the current resource in the URL with the resource within the request.  You can use this method to update and create a new state of a resource. The following snippet shows the syntax of the HTTP PUT

put(url: string, 
     body: any, 
     options: { 
        headers?: HttpHeaders | { [header: string]: string | string[]; }; 
        observe?: "body|events|response|"; 
        params?: HttpParams | { [param: string]: string | string[]; }; 
        reportProgress?: boolean; 
        responseType: "arraybuffer|json|blob|text"; 
        withCredentials?: boolean; 
     }
): Observable

 

 

HTTP POST

Using the HTTP client, you can send resources to the server using this method. When you use this method, you request the web server to accept the resources contained in the POST message. This approach is typically used to send sensitive messages such as contacts and passwords. The syntax of the HTTP POST method is seen in the excerpt below

post(url: string,
     body: any,
     options: {
        headers?: HttpHeaders | { [header: string]: string | string[]; };
        observe?: "body|events|response|";
        params?: HttpParams | { [param: string]: string | string[]; };
        reportProgress?: boolean;
        responseType: "arraybuffer|json|blob|text";
        withCredentials?: boolean;
     }
): Observable

 

Angular 12 HTTP Post example

 
addFruit(fruit:Fruit): Observable<any> {
    const headers = { 'content-type': 'application/json'}  
    const body=JSON.stringify(fruit);
    this.http.post(this.baseURL + 'fruit', body,{'headers':headers , observe: 'response'})
      .subscribe(
       response=> {
            console.log("Uploaded completed sucessfully "+response);
        },
        error => {
            console.log("errors");
        },
        () => {
            console.log("upload Completed");
        }
}

 

Conclusion

Finally, we learned how to utilize HTTPCLIent requests to send, update, and retrieve data from the server. In the following chapter, we'll look at Angular 12 Material