Oops! An unhandled promise error occurred when trying to fetch a URL with a status of 0. The response received has a status code of

Question

Oops! An unhandled promise error occurred when trying to fetch a URL with a status of 0. The response received has a status code of

I keep encountering an error whenever I try to hit a post request URL:

Error: Uncaught (in promise): Response with status: 0 for URL: null
    at c 
(http://localhost:8100/build/polyfills.js:3:19752)
    at c 
(http://localhost:8100/build/polyfills.js:3:19461)
    at http://localhost:8100/build/polyfills.js:3:20233
    at t.invokeTask 
(http://localhost:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask 
(http://localhost:8100/build/vendor.js:5125:33)
    at t.invokeTask 
(http://localhost:8100/build/polyfills.js:3:15581)
    at r.runTask 
(http://localhost:8100/build/polyfills.js:3:10834)
    at o 
(http://localhost:8100/build/polyfills.js:3:7894)
    at e.invokeTask [as invoke] 
(http://localhost:8100/build/polyfills.js:3:16823)
    at p 
(http://localhost:8100/build/polyfills.js:2:27648)

Here is my TypeScript code:

public getCategory(){
        console.log('test');
        return new Promise((resolve, reject) => {
        let header = new Headers();
        header.append('Content-Type', 'application/x-www-form-urlencoded');
        let curr_page = { "currentPage":1,"pageSize":2 };
        // var page_size = 5;
        this.http.post(this.db,JSON.stringify(curr_page),{headers: header}).map(res=>res.json())
        .subscribe(res=>{
          console.log(res);
          resolve(res);
        }, (err) => {
          reject(err);
        });
    });
  }

Interestingly, when I attempt to test the same URL on Postman app, it works perfectly. Seeking assistance!

angular typescript ionic-framework ionic3 typescript2.0

Answer 1

Answer №1

Below is the example of an HTTP POST request using Angular

postRequest(url: string, data: any, options?: RequestOptionsArgs): Observable<Response>;

You can implement it as shown in the code snippet below:

var requestOptions = new RequestOptions();
requestOptions.headers = new Headers();
requestOptions.headers.append( 'Content-Type', 'application/json');
let bodyData = { "name":"John Doe", "age":30 };
    this.http.post(this.apiUrl, JSON.stringify(bodyData), requestOptions).map(response=>response.json())
    .subscribe(response=>{
      console.log(response);
      handleSuccess(response);
    }, (error) => {
      handleError(error);
    });

Answer 2

Below is the example of an HTTP POST request using Angular

postRequest(url: string, data: any, options?: RequestOptionsArgs): Observable<Response>;

You can implement it as shown in the code snippet below:

var requestOptions = new RequestOptions();
requestOptions.headers = new Headers();
requestOptions.headers.append( 'Content-Type', 'application/json');
let bodyData = { "name":"John Doe", "age":30 };
    this.http.post(this.apiUrl, JSON.stringify(bodyData), requestOptions).map(response=>response.json())
    .subscribe(response=>{
      console.log(response);
      handleSuccess(response);
    }, (error) => {
      handleError(error);
    });

Oops! An unhandled promise error occurred when trying to fetch a URL with a status of 0. The response received has a status code of

Answer №1

Similar questions

Convert JSON data to an array using Observable

Is it possible to record the attributes within an interface in TypeScript?

Angular: Unable to retrieve defined data when loading a component

Mastering Angular: Accessing undefined properties (specifically 'push')

Modify 2 URL parameters using the entered text and selection

What is the general consensus on combining SWR with Redux - is it considered a best practice?

What is the correct way to close an ngx-contextmenu in an Angular application?

Exploring the functionality of surveyjs in conjunction with react and typescript

Is there a way to deactivate the click function in ngx-quill editor for angular when it is empty?

Error encountered when attempting to close a MatDiaLog in Angular as the close button is unable to read the property 'close' of null

Tips for adjusting fullcalendar's local property in an Angular application

Having trouble deserializing the POJO that was sent from an Angular HTTP post request within my Spring Boot POST-mapped function

Using a class as an interface in TypeScript is a common practice when a constructor is

Trouble with locating newly created folder in package.json script on Windows 10

Exploring Blob functionality in TypeScript?

Arrange an array of integers and letters alphabetically in an Angular/Typescript environment

What is the reason `addEventListener` does not work with a class method?

Converting image bytes to base64 in React Native: A step-by-step guide

What is the best way to send data from a child component to a parent component in Angular 2?

Unresolved conflict stemming from an HTML closing tag in the index.html file, despite both source and destination files being identical