Fitted

ติดแล้ว

ใช้ตัวตกแต่ง ECMAScript (ปัจจุบันเป็นข้อเสนอขั้นที่ 2) เพื่อดำเนินการคำขอ HTTP และจัดการการประมวลผลการตอบสนอง ซึ่งเป็นวิธีที่ง่ายและอ่านได้ในการจัดการวิธีที่ข้อมูลไหลผ่านเลเยอร์เครือข่ายของแอปพลิเคชันของคุณ

ตัวอย่าง

สองส่วนหลัก คือ ส่วนตกแต่งเมธอดซึ่งจะดำเนินการตามคำขอจริง และส่วนตกแต่งคลาสซึ่งจะช่วยให้คุณสามารถจัดการกับวิธีแปลงและจัดการการตอบสนองจากเซิร์ฟเวอร์ได้

ตัวอย่างที่ง่ายที่สุดคือการดึงข้อมูลจากตำแหน่งข้อมูล JSON:

 import { get } from 'fitted' ;

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

และดึง:

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

การใช้งาน

คำขอพื้นฐาน

การใช้ get มัณฑนากรคุณสามารถทริกเกอร์คำขอ GET :

 import { get } from 'fitted' ;

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

การรวมพารามิเตอร์

ในการผสานพารามิเตอร์เข้ากับ url เราใช้ url-template ซึ่งใช้วงเล็บปีกกาเพื่อห่อหุ้มตัวแปรที่จะผสาน

 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 ฐาน

โดยส่วนใหญ่ตำแหน่งข้อมูลของคุณจะแชร์ URL ฐานเดียวกัน ดังนั้น Fited จึงให้คุณตั้งค่า URL ฐานซึ่งจะขึ้นหน้าเส้นทางทั้งหมดที่ตั้งค่าไว้ในเครื่องมือตกแต่งเมธอดของคุณ

 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 ) ;
      }
}

กำลังส่งข้อมูล

หากต้องการเพิ่มข้อมูลลงในคำขอของคุณสำหรับ post put และ destroy คำขอและระบุสตริงการสืบค้นสำหรับคำขอ get ของคุณ คุณจะต้องเพิ่มออบเจ็กต์ data ลงในข้อกำหนดคำขอของคุณ

 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 ) ;
      }
}

ขอตกแต่ง

บ่อยครั้งที่จุดสิ้นสุดทั้งหมดจะมีข้อกำหนดคำขอเดียวกัน เช่น กำหนดให้ทั้งหมดต้องมีการตั้งค่าส่วนหัวบางอย่าง สำหรับสิ่งนี้ สามารถใช้ @request มัณฑนากรได้ มันจะได้รับการกำหนดค่าของแต่ละคำขอที่ส่งผ่านก่อนที่จะส่งมอบให้กับไดรเวอร์

 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 ) ;
    }
}

การจัดการการตอบสนอง

เมื่อเซิร์ฟเวอร์ตอบสนองด้วยส่วนหัว Content-Type ที่มี application/json Fit จะฟีดเซิร์ฟเวอร์ดังกล่าวไปยังฟังก์ชัน JSON.parse โดยอัตโนมัติ เพื่อให้ Promise ที่เป็นผลลัพธ์จะส่งออกออบเจ็กต์ที่เกี่ยวข้อง

Content-Type อื่นใดจะส่งผลให้เกิดข้อผิดพลาดและกำหนดให้คุณต้องใช้ตัวจัดการของคุณเอง

โปรเซสเซอร์ตอบสนองแบบกำหนดเอง

เมื่อตำแหน่งข้อมูลของคุณส่งคืนสิ่งที่ต้องมีการประมวลผลล่วงหน้า คุณสามารถกำหนดตัวประมวลผลสำหรับตำแหน่งข้อมูลทั้งหมดในคำจำกัดความ API ของคุณได้ ประกอบด้วยฟังก์ชันที่รับการตอบสนองจากเซิร์ฟเวอร์และส่งข้อมูลที่แยกวิเคราะห์ไปยังออบเจ็กต์การตอบสนอง

 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 ) ;
    }
}