Obtaining the status code from an HTTP request in Angular 2

I'm struggling to successfully make an HTTP request and either return the response object or a boolean value. I am having trouble handling errors as my `handleError` function is not functioning properly.

This is what my code currently looks like:

The service

updateProduct(product: Product): Promise<number> {
        return this.http.put('/api/products/1' + product.id,product)
            .toPromise()
            .then(response => response.status)
            .catch(this.handleError);
    }

    private handleError(error: any): Promise<any> {
        //console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }

The save function

onSave(): void {
    this.productService.updateProduct(this.product)
        .then(() => this.goBack())
        .catch(er => console.log(er));
}

What steps can I take to resolve this issue?

Answer №1

It seems that in your code, you are choosing to return error.message if it exists.

return Promise.reject(error.message || error);

If you need to make changes to the entire error object, consider returning it as is.

return Promise.reject(error);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reordering items in Angular2 ngFor without having to recreate them

I am facing a unique situation where I must store state within item components (specifically, canvas elements) that are generated through an ngFor loop. Within my list component, I have an array of string ids and I must create a canvas element for each id ...

What is the best way to store information in JSON format and transmit it to a server using an API?

I'm looking to save the form data in JSON format and send it from my UI to the server. I've searched through numerous sources but haven't found a solution yet. Struggling with the basic design structure, any help would be greatly appreciat ...

An issue occurred while trying to run Ionic serve: [ng] Oops! The Angular Compiler is in need of TypeScript version greater than or equal to 4.4.2 and less than 4.5.0, but it seems that version 4

Issue with running the ionic serve command [ng] Error: The Angular Compiler requires TypeScript >=4.4.2 and <4.5.0 but 4.5.2 was found instead. Attempted to downgrade typescript using: npm install typescript@">=4.4.2 <4.5.0" --save-dev --save- ...

Modifying the functionality of "use-input" in Vue.js

Currently, I am utilizing vue.js along with typescript to create an input field that allows users to either choose items from a drop-down menu or manually type in their own input. There are various scenarios where custom input might be allowed or where onl ...

Passing a type argument to the custom Toolbar of MUI DataGrid in TypeScript React: A step-by-step guide

Utilizing a personalized Toolbar alongside the Material UI DataGrid, I am transferring a set of props through object syntax: import { DataGrid } from "@mui/x-data-grid"; import InternalToolbar from "../InternalToolbar"; <DataGrid ...

What methods are available to decrease the width of the clarity stack component label?

Is there a way to decrease the width of the label in the clarity stack component? I attempted to adjust the width using custom styling, but it did not work as expected. Custom styles applied: .myStyle { max-width: 10% !important; flex-basis: 10% ...

Unable to display animation without first launching it on Rive web

I attempted to incorporate a Rive animation into my Angular web application <canvas riv="checkmark_icon" width="500" height="500"> <riv-animation name="idle" [play]="animate" (load)=&qu ...

When removing the class "img-responsive" from an image, the bootstrap columns begin to overlap

Just starting out with Bootstrap while working on an Angular2 project and I have a question. Currently, I have a map-component taking up 3 columns on the left-hand side, but every time I resize the browser, the image also resizes. I want the image to rema ...

Maintaining the order of subscribers during asynchronous operations can be achieved by implementing proper synchronization

In my Angular setup, there is a component that tracks changes in its route parameters. Whenever the params change, it extracts the ID and triggers a function to fetch the corresponding record using a promise. Once the promise resolves, the component update ...

How to efficiently manage multiple input fields with a single ref in React using TypeScript

I'm attempting to use the same reference for multiple input fields in my form. However, when I log it, the ref only points to the first input field. Is there a way I can share the same ref across different inputs? import React, {FC, useEffect, useRef, ...

The takeUntil function will cancel an effect request if a relevant action has been dispatched before

When a user chooses an order in my scenario: selectOrder(orderId): void { this.store$.dispatch( selectOrder({orderId}) ); } The order UI component triggers an action to load all associated data: private fetchOrderOnSelectOrder(): void { this.sto ...

Quicker component refreshing in the Angular framework

Two Angular components were created, one for adding a new post and another for displaying all posts. Clicking the create post button redirects to the PostList component, which shows all posts. To automatically load the new post without manual refreshing, w ...

Accurately locate all ChildComponents throughout the entire Component hierarchy

I am facing a challenge in Angular where I need to retrieve all the ChildComponents from my ParentComponent. The issue is that the ChildComponents are not directly nested within the ParentComponent, but instead they are children of other components which a ...

Problem with Angular Material Sidenav Styling

Currently, I am working with the mat-sideNav route and encountered a CSS issue with the sidenav after selecting a new route. When I click on a new route using the sidenav module and then return to the sidenav to change routes again, I notice that the hover ...

Tips for managing table scroll in a flexbox design

Check out the demo here I am working with a table that has an indefinite number of rows and columns. When the table has a small number of rows and columns, it adjusts its width according to the available page space minus the width of the sidebar. Everythi ...

Holding off on completing a task until the outcomes of two parallel API requests are received

Upon page load, I have two asynchronous API calls that need to be completed before I can calculate the percentage change of their returned values. To ensure both APIs have been called successfully and the total variables are populated, I am currently using ...

Angular version 4.X.X: Utilizing keyValueDiffer in your code

Looking for guidance on properly utilizing the keyValueDiffer in the latest Angular versions. I'm running into an issue where the create() method is deprecated due to changes in ChangeDetectorRef. this.diff = this.keyValueDiffer.find(obj).create(null ...

Angular implementation of reverse geocoding

retrieveAddress(lat: number, lng: number) { console.log('Locating Address'); if (navigator.geolocation) { let geocoder = new google.maps.Geocoder(); let latlng = new google.maps.LatLng(lat, lng); let request = { LatLng: latlng }; ...

Vercel offers unique functionality specifically designed for Next.js

As part of my application migration process, I am transitioning to the nextjs framework. I am curious if all the features and functionalities offered by Next.js can be replicated on private Docker servers or other Jamstack platforms, or if there are limi ...

Utilizing Anglar 16's MatTable trackBy feature on FormGroup for identifying unaltered fields

In my application, I am working with a MatTable that has a datasource consisting of AbstractControls (FormGroups) to create an editable table. At the end of each row, there are action buttons for saving or deleting the elements. My goal is to implement tr ...