Fitted

Pas

Gunakan dekorator ECMAScript (saat ini merupakan proposal Tahap 2) untuk menjalankan permintaan HTTP dan mengelola pemrosesan respons, cara yang mudah dan mudah dibaca untuk mengelola bagaimana data mengalir melalui lapisan jaringan aplikasi Anda.

Contoh

Dua bagian utama, dekorator metode yang akan benar-benar melakukan permintaan, dan dekorator kelas yang memungkinkan Anda menangani cara respons dari server diubah dan ditangani.

Contoh paling sederhana hanyalah mengambil data dari titik akhir JSON:

 import { get } from 'fitted' ;

class HackerNews {
    @ get ( 'https://hacker-news.firebaseio.com/v0/topstories.json' )
    topstories ( request , response ) {
      return request ( { } , response ) ;
    }
}

Dan ambil:

 const hackerNews = new HackerNews ( ) ;
const topstories = await hackerNews . topstories ( ) ;
console . log ( topstories ) ; 

Penggunaan

Permintaan dasar

Dengan menggunakan dekorator get , Anda dapat memicu permintaan GET :

 import { get } from 'fitted' ;

class HackerNews {
    @ get ( 'https://hacker-news.firebaseio.com/v0/topstories.json' )
    topstories ( request , response ) {
      return request ( { } , response ) ;
    }
}

Menggabungkan param

Untuk menggabungkan params dengan url kami menggunakan url-template, yang menggunakan tanda kurung kurawal untuk merangkum variabel yang akan digabungkan.

 import { get } from 'fitted' ;

class HackerNews {
      @ get ( 'https://hacker-news.firebaseio.com/v0/item/{id}.json' )
      item ( id , request , response ) {
          return request ( {
                template : {
                    id : 123
                 }
          } , response ) ;
      }
}

Url dasar

Seringkali titik akhir Anda akan berbagi url dasar yang sama, jadi Fitted memungkinkan Anda menyetel url dasar yang akan diawali dengan semua jalur yang disetel di dekorator metode Anda.

 import { base , get } from 'fitted' ;

@ base ( 'https://hacker-news.firebaseio.com/v0/' )
class HackerNews {
      @ get ( 'item/{id}.json' )
      item ( id , request , response ) {
          return request ( {
                template : {
                    id : 123
                 }
          } , response ) ;
      }
}

Mengirim data

Untuk menambahkan data ke permintaan Anda post , put dan destroy permintaan dan tentukan string kueri untuk permintaan get Anda, Anda menambahkan objek data ke definisi permintaan Anda.

 import { put } from 'fitted' ;

class HackerNews {
      @ put ( 'https://hacker-news.firebaseio.com/v0/item/{id}.json' )
      item ( id , name , request , response ) {
          return request ( {
                template : {
                    id : 123
                } ,
                data : {
                   name : name
                }
          } , response ) ;
      }
}

Minta dekorasi

Seringkali semua titik akhir memiliki persyaratan permintaan yang sama, misalnya mengharuskan semua memiliki beberapa kumpulan header. Untuk ini dekorator @request dapat digunakan. Ini akan meneruskan konfigurasi setiap permintaan sebelum menyerahkannya kepada pengemudi.

 import { get , request } from 'fitted' ;

const myRequestHandler = config => {
    config . headers = {
        'accept' : 'application/json' 
    }
    
    return config ;
}

@ request ( myRequestHandler )
class HackerNews {
    @ get ( 'item/{id}.json' )
    item ( id , request , response ) {
      return request ( {
            template : {
                id : id
            }
        } , response ) ;
    }
}

Penanganan respons

Ketika server merespons dengan header Content-Type yang berisi application/json Fitted akan secara otomatis memasukkannya ke fungsi JSON.parse sehingga Promise yang dihasilkan akan menampilkan objek yang sesuai.

Content-Type lainnya akan mengakibatkan Kesalahan terjadi dan mengharuskan Anda menerapkan penangan Anda sendiri.

Prosesor respons khusus

Ketika titik akhir Anda mengembalikan sesuatu yang memerlukan pra-pemrosesan, Anda dapat menentukan prosesor untuk semua titik akhir dalam definisi api Anda. Ini terdiri dari fungsi yang menerima respon dari server dan meneruskan data yang diurai ke objek respon.

 import { get , processor } from 'fitted' ;

const myProcessor = response => {
    const data = JSON . parse ( response . getBody ( ) ) ;
    response . setBody ( data ) ;
    
    return data ;
}

@ processor ( myProcessor )
class HackerNews {
    @ get ( 'item/{id}.json' )
    item ( id , request , response ) {
      return request ( {
            template : {
                id : id
            }
        } , response ) ;
    }
}