lifelong learner — urip iku urup, currently working on accenture.

Ionic – http dengan promise

0
Degananda.com -

Pada ulasan sebelumnya kita telah membahas cara melakukan http request dengan menggunakan library http dari javascript yang dimemanfaatkan observable. Ulasan ini akan membahas cara lain yakni dengan memanfaatkan promise.

Promise

Promise merupakan suatu object yang merepresentasikan suatu milestone atau stage dari operasi asynchronous. Secara mudahnya dapat dianalogikan seperti saat kita kecil orangtua kita biasannya menjanjikan untuk memberi sesuatu (miaslnya membelikan mainan) saat selesai ujian semester apabila kita memenuhi syarat tertentu misalnya : mendapatkan rangking 1.

Pada kondisi diatas terdapat dua kemungkinan yakni kita akan mendapatkan mainan tersebut yang berarti kita mendapatkan rangking satu dan kemungkinan kedua kita tidak mendapatkan mainan karena tidak mendapatkan rangking satu. Dari kasus tersebut merepresentasikan state atau milestone yang dihandle oleh promise yakni :

  1. Pending, yaitu ketika kita menunggu apakah kita akan mendapatkan mainan (menunggu ujian semester dan pengumuman rangking)
  2. Resolved, yaitu ketika kita mendapatkan mainan karena kita mendapatkan rangking 1
  3. Rejected, yaitu ketika kita gagal mendapatkan mainan karena gagal mendapatkan rangking 1.

Komponen yang paling utama dalam promise adalah statement / janji. Pada kasus itu statementnya adalah “kita akan diberikan mainan pada semester depan ketika mendapatkan rangking 1″. Poin ketika mendapatkan rangkai 1 ini akan menghasilkan apakah promise tersebut akan dikabulkan atau tidak. Pada kode statement tersebut dapat kita artikan sebagai fungsi yang akan dieksekusi. Contohnya adalah seperti ini


let rangking = 1;
let janjiIBU = new Promise(
  (resolve, reject) => {
    if(rangking == 1){
      resolve('ibu membelikan mainan')
    } else {
      reject('ibu tidak membelikan mainan')
    }
  }
)

rangking disini kita sebut sebagai kondisi sedangkan “ibu membelikan mainan” dan “ibu tidak memberikan mainan” merupakan statement / fungsi yang “dijanjikan”. Janji tidak harus selalu kalimat “positif” (dapat berbentuk negasi dari janji tersebut) tidak membelikan mainan juga dapat disebut sebagai janji.

Promise vs Obseravble

Jika anda telah familar dengan observable sebelumnya dan bertanya apakah perbedaan promise dan observable maka jawabannya adalah :

  1. Promise hanya dapat menghandle satu event ketika operasi async berhasil atau gagal sedangkan pada observable dapat menghandle banyak event tidaknya apakah operasi async tersebut berhasil ataupun gagal. Contohnya observable dapat menghandle ketika data tersebut berubah (tentunnya dengan beberapa konfigurasi pada sisi server untuk membuat realtime).
  2. Setiap event yang ada pada observable memiliki callbacknya masing-masing.
  3. Dengan observable kita dapat melakukan fungsi seperti .map()  , forEach(), reduce() dan operasi-operasi pada operator rxjs lainnya. Namun pada promise tidak dapat melakukan hal-hal tersebut.
  4. Observable dapat dicancel (operasi dibatalkan) sedangkan promise tidak dapat dibatalkan.

Itulah beberapa gambaran mengenai perbedaan promise dan observable tentunnya kita dapat menggunakannya sesuai dengan kondisi (sikon).

Implementasi

sekarang saatnya untuk melakukan implementasi promise untuk melakukan http request pada API. Jika sebelumya saat menggunakan observable kode yang kita gunakan adalah

getNote() : Observable<any> {
    return this.http.get('https://angular-note-9a26a.firebaseio.com/note.json').map(
        (res : Response) => res.json()
    );
}

sedangkan ketika menggunakan promise maka kode yang digunakan adalah


getNote() : Promise<any> {
    return new Promise(
      (resolve, reject) => {
        this.http.get('https://angular-note-9a26a.firebaseio.com/note.json').subscribe(
          (res) => {
            // success
            resolve(res)
          }
        )
      }
    );
}

kedua hal tersebut memiliki tujuan yang sama yakni untuk mendapatkan data dari server namun dengan perbedaan utilitas sebagaimana telah dibahas pada bagian “promise vs observable”. Untuk mendapatkan data tersebut jika pada observable kita menggunakan subscribe maka pada saat menggunakna promise subscribe digunakan untuk mendapatkan data dari http dan untuk memanggilnya pada komponen/page memanfaatkan fungsi “then” ketika promise di resolve atau fungsi “catch” saat promise di reject. Untuk lebih jelasnya perhatikan kode dibawah ini


import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
// import provider
import { NoteProvider } from './../../providers/note/note';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public noteProvider : NoteProvider) {
    this.noteProvider.getNote().then(
      (res) => {
        console.log(res)
      }
    ).catch(
      (res) => {
        console.log('failed')
      }
    )
  }

}

hasil saat kode diatas dijalankan pada browser

anda dapat melihat bahwa terjadi perbedaan antara output yang dihasilkan oleh observable dan promise karena kita tidak mentransformasikan respon dengan operator rxjs map.