Skip to content

Instantly share code, notes, and snippets.

@enappd
Last active July 31, 2021 16:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save enappd/e5a7be4641c4a79f62b1364852c904af to your computer and use it in GitHub Desktop.
Save enappd/e5a7be4641c4a79f62b1364852c904af to your computer and use it in GitHub Desktop.
Ionic http calls demo - Fetch API
import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
@Component({
selector: 'app-fetch',
templateUrl: './fetch.page.html',
styleUrls: ['./fetch.page.scss'],
})
export class FetchPage {
localhost:string = 'localhost';
plt: string;
web_get_restricted = 0;
web_post_restricted = 0;
web_put_restricted = 0;
web_delete_restricted = 0;
android_get_restricted = 0;
android_post_restricted = 0;
android_put_restricted = 0;
android_delete_restricted = 0;
ios_get_restricted = 0;
ios_post_restricted = 0;
ios_put_restricted = 0;
ios_delete_restricted = 0;
// More variables for restricted API calls
constructor(private platform: Platform) {
this.plt = this.platform.is('mobileweb') ? 'web' :
this.platform.is('ios') ? 'ios' : 'android';
this.localhost ="192.168.0.7" // put your IP here
}
get() {
fetch(`http://${this.localhost}:5000/ionic4fullapp/us-central1/getData?data=fromApp`)
.then(async response => {
if (response.ok) {
const data = await response.json();
this.changeStatus('get','unrestricted', 1);
}
})
.catch(e => {
this.changeStatus('get','unrestricted', 2);
})
}
post() {
const data = { data: 'postData' }
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}
fetch(`http://${this.localhost}:5000/ionic4fullapp/us-central1/postData`, options)
.then(async response => {
if (response.ok) {
const data = await response.json();
this.changeStatus('post','unrestricted', 1);
}
})
.catch(e => {
this.changeStatus('post','unrestricted', 2);
})
}
put() {
const data = { data: 'putData' }
const options = {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}
fetch(`http://${this.localhost}:5000/ionic4fullapp/us-central1/putData`, options)
.then(async response => {
if (response.ok) {
const data = await response.json();
this.changeStatus('put','unrestricted', 1);
}
})
.catch(e => {
this.changeStatus('put','unrestricted', 2);
})
}
delete() {
const data = { data: 'deleteData' }
const options = {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}
fetch(`http://${this.localhost}:5000/ionic4fullapp/us-central1/deleteData`, options)
.then(async response => {
if (response.ok) {
const data = await response.json();
this.changeStatus('delete','unrestricted', 1);
}
})
.catch(e => {
this.changeStatus('delete','unrestricted', 2);
})
}
changeStatus(type, restriction,status) {
this[`${this.plt}_${type}_${restriction}`] = status
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment