Make an http.patch request to the server using a Nativescript application

Question

Make an http.patch request to the server using a Nativescript application

I am attempting to make an http.patch request to the server in my Nativescript application, which is built with Typescript and Angular2. The backend system is developed using Python(Django).

Here is the code for my request:

  updateOrder(id, message) {
  let headers = new Headers();
  headers.append("Authorization", "Token " + Config.token);
  headers.append("Content-Type", "application/json");
  return this.http.patch(
      Config.apiUrl + "orders/" + id + "/",
      message,
      {headers: headers}
  )
  .map(response => response.json())
  .catch((res: Response) => this.handleErrors(res));

Next, I execute the request:

changeStatus(status){
    var message = JSON.stringify({status: status});
    this.orderService.updateOrder(this.order.id, message).subscribe(
        data => console.log(data),
        err => alert(JSON.stringify(err))
    );
}

However, the server responds with the following data:

{"_body":{},"status":200,"ok":true,"statusText":"","headers":{},"type":3,"url":null}

Despite this response, the "status" property that I intended to change remains unchanged.

What could be causing this issue?

http angular typescript patch nativescript

Answer 1

Answer №1

Utilize the http module available in NativeScript.

To send a PATCH request, you can refer to the following example:

In your page.ts file (TypeScript example):

  import * as http from"http";
  http.request({
      url: "https://httpbin.org/patch",
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      content: JSON.stringify({ MyVariableOne: "ValueOne", MyVariableTwo: "ValueTwo" })
  }).then(response => {
      var result = response.content.toJSON();
      console.log(result);
  });
}

For more information on the HTTP module, check out the API reference here: https://docs.nativescript.org/api-reference/modules/http.html

Additionally, you can find a detailed documentation article on how to post JSON data using HTTP requests here:

Answer 2

Utilize the http module available in NativeScript.

To send a PATCH request, you can refer to the following example:

In your page.ts file (TypeScript example):

  import * as http from"http";
  http.request({
      url: "https://httpbin.org/patch",
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      content: JSON.stringify({ MyVariableOne: "ValueOne", MyVariableTwo: "ValueTwo" })
  }).then(response => {
      var result = response.content.toJSON();
      console.log(result);
  });
}

For more information on the HTTP module, check out the API reference here: https://docs.nativescript.org/api-reference/modules/http.html

Additionally, you can find a detailed documentation article on how to post JSON data using HTTP requests here:

Answer 3

Answer №2

Here is my approach to handling http requests:

1.- Begin by including the NativeScript http module in the Root App NgModule:

import { NativeScriptHttpModule } from "nativescript-angular/http";
...
@NgModule({
  imports: [
      ...
      NativeScriptHttpModule,
      ...
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

2.- Next, import Angular's http (and headers if necessary) into your component:

import { Http, Headers } from '@angular/http';

3.- Inject the imported module in the constructor:

constructor(private http: Http, ...) { ... }

4.- Utilize the http methods (such as POST in this example, but adaptable for any):

var url = "http://www.api-url.com/example.php";
var body = {foo: "foo", bar:"bar"};
let headers = new Headers();
headers.append("Authorization", token); //You can include any required headers
headers.append("Content-Type", "application/json");
this.http.post(url, body, { headers: headers })
    .map(res => res.json())
    .subscribe(
        data => this.connectionEstablished(data),
        err => this.handleErrors(err)
    );

If encountering an error with the map() method, remember to add the following line:

import "rxjs/add/operator/map";

I trust this information proves beneficial!

Answer 4

Here is my approach to handling http requests:

1.- Begin by including the NativeScript http module in the Root App NgModule:

import { NativeScriptHttpModule } from "nativescript-angular/http";
...
@NgModule({
  imports: [
      ...
      NativeScriptHttpModule,
      ...
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

2.- Next, import Angular's http (and headers if necessary) into your component:

import { Http, Headers } from '@angular/http';

3.- Inject the imported module in the constructor:

constructor(private http: Http, ...) { ... }

4.- Utilize the http methods (such as POST in this example, but adaptable for any):

var url = "http://www.api-url.com/example.php";
var body = {foo: "foo", bar:"bar"};
let headers = new Headers();
headers.append("Authorization", token); //You can include any required headers
headers.append("Content-Type", "application/json");
this.http.post(url, body, { headers: headers })
    .map(res => res.json())
    .subscribe(
        data => this.connectionEstablished(data),
        err => this.handleErrors(err)
    );

If encountering an error with the map() method, remember to add the following line:

import "rxjs/add/operator/map";

I trust this information proves beneficial!

Make an http.patch request to the server using a Nativescript application

Answer №1

Answer №2

Similar questions

Disguising the Navigation Bar when choosing from various databases

Is it possible for Angular 2 JWT to have an unauthenticatedRedirector feature?

JavaScript - Trouble encountered while trying to use splice to insert one array into another array

"An error occurred while trying to resolve "npm" from npm.fontawesome.com

Implementing Angular *ngFor to Reference an Object Using Its Key

The dynamic concatenation of Tailwind classes is failing to have any effect, even though the full class name is being

Attempting to launch Angular application on GitHub Pages

When attempting to import a react component written with TypeScript to npm, receiving an 'undefined' error

Tips for executing embedded scripts within templates

Reattempting a Promise in Typescript when encountering an error

How to access properties of objects within an array in Angular 4

What method can be utilized to selectively specify the data type to be used in TypeScript?

The manager encountered an issue while querying for "Photo" data: EntityMetadataNotFoundError - no metadata could be found

Is it possible to share screens via socket.io without the need for selecting a screen prompt?

Divide a list Observable into two parts

What steps can be taken to stop Internet Explorer from caching Ajax requests in Angular2 using TypeScript?

Invoke a function of a child component that resides within the <ng-content> tag of its parent component

Guide to building an interface for an object containing a nested array

Typescript: Transforming generic types into concrete types

SmartEdit functions properly when spartacus is running using yarn start --ssl, but does not work without SSL enabled