zl fetch

zlFetch

zlFetch เป็น wrapper สำหรับการดึงข้อมูลที่ช่วยให้คุณส่งคำขอได้อย่างสะดวก

คุณสมบัติของมันมีดังนี้:

• การปรับปรุงคุณภาพชีวิตผ่านฟังก์ชัน fetch ดั้งเดิม

  • ใช้การตอบกลับทันทีโดยไม่ต้องใช้ response.json() , response.text() หรือ response.blob()
  • การจัดการข้อผิดพลาดเหมือนสัญญา — ข้อผิดพลาด 400 และ 500 ทั้งหมดจะถูกส่งไปที่บล็อก catch โดยอัตโนมัติ
  • จัดการข้อผิดพลาดได้ง่ายเมื่อใช้ await - ข้อผิดพลาดสามารถส่งคืนได้ ดังนั้นคุณจึงไม่ต้องเขียนบล็อก try/catch

• การปรับปรุงเพิ่มเติมเหนือฟังก์ชัน fetch ดั้งเดิม

  • ส่วนหัว Content-Type จะถูกตั้งค่าโดยอัตโนมัติตามเนื้อหา body
  • รับทุกสิ่งที่คุณต้องการเกี่ยวกับการตอบกลับของคุณ — headers body status อื่นๆ อีกมากมาย
  • แก้ไขข้อบกพร่องคำขอของคุณโดยไม่ต้องดูแผงเครือข่าย
  • ชวเลขสำหรับวิธีการ GET , POST , PUT , PATCH และ DELETE
  • ตัวช่วยในการสร้างสตริงการสืบค้น เพื่อให้คุณไม่ต้องวุ่นวายกับพารามิเตอร์การสืบค้น
  • สร้างส่วนหัวการอนุญาตด้วยคุณสมบัติ auth
  • สร้างอินสแตนซ์เพื่อเก็บ URL และตัวเลือกเพื่อให้คุณไม่ต้องทำซ้ำ

หมายเหตุ: zlFetch เป็นไลบรารี ESM ตั้งแต่ v4.0.0

การติดตั้ง zlFetch

ผ่าน npm (แนะนำ)

 # Installing through npm
npm install zl-fetch --save

จากนั้นคุณสามารถใช้งานได้โดยการนำเข้าลงในไฟล์ JavaScript ของคุณ

 import zlFetch from 'zl-fetch'

ใช้ zlFetch โดยไม่มี npm :

คุณสามารถนำเข้า zlFetch ลงใน JavaScript ได้โดยตรงผ่าน CDN

ในการดำเนินการนี้ คุณต้องตั้งค่าประเภทของ script เป็น module ก่อน จากนั้นจึงนำเข้า zlFetch

 < script type =" module " >
  import zlFetch from 'https://cdn.jsdelivr.net/npm/[email protected]/src/index.js'
</ script > 

เริ่มต้นอย่างรวดเร็ว

คุณสามารถใช้ zlFetch ได้เหมือนกับฟังก์ชัน fetch ทั่วไป ข้อแตกต่างเพียงอย่างเดียวคือคุณไม่จำเป็นต้องเขียนวิธี response.json หรือ response.text อีกต่อไป!

zlFetch จะจัดการมันให้คุณโดยอัตโนมัติ เพื่อให้คุณสามารถใช้การตอบกลับของคุณได้โดยตรง

 zlFetch ( 'url' )
  . then ( response => console . log ( response ) )
  . catch ( error => console . log ( error ) )

วิธีการจดชวเลขสำหรับ GET, POST, PUT, PATCH และ DELETE

zlFetch มีวิธีการชวเลขสำหรับวิธี REST ทั่วไปเหล่านี้ เพื่อให้คุณสามารถใช้งานได้อย่างรวดเร็ว

 zlFetch . get ( /* some-url */ )
zlFetch . post ( /* some-url */ )
zlFetch . put ( /* some-url */ )
zlFetch . patch ( /* some-url */ )
zlFetch . delete ( /* some-url */ )

ประเภทการตอบกลับที่รองรับ

zlFetch รองรับประเภทการตอบกลับ json , text และ blob ดังนั้นคุณจึงไม่จำเป็นต้องเขียน response.json() , response.text() หรือ response.blob()

ยังไม่รองรับการตอบกลับประเภทอื่นในขณะนี้ หากคุณต้องการรองรับการตอบกลับประเภทอื่น ให้พิจารณาใช้เครื่องจัดการการตอบกลับของคุณเอง

คำตอบประกอบด้วยข้อมูลทั้งหมดที่คุณต้องการ

zlFetch ส่งข้อมูลทั้งหมดที่คุณต้องการในออบเจ็กต์ response ซึ่งรวมถึงสิ่งต่อไปนี้:

• headers : ส่วนหัวการตอบกลับ
• body : ร่างกายตอบสนอง
• status : สถานะการตอบกลับ
• statusText : ข้อความสถานะการตอบกลับ
• response : การตอบสนองดั้งเดิมจากการดึงข้อมูล

เราทำเช่นนี้เพื่อให้คุณไม่ต้องหา headers , status , statusText หรือแม้แต่ส่วนที่เหลือของออบเจ็กต์ response ด้วยตัวเอง

การดีบักคำขอ

ใหม่ใน v4.0.0 : คุณสามารถแก้ไขจุดบกพร่องของวัตถุคำขอได้โดยการเพิ่มตัวเลือก debug นี่จะเปิดเผยออบเจ็กต์ debug ที่มีการร้องขอที่กำลังสร้างอยู่

• url
• method
• headers
• body

 zlFetch ( 'url' , { debug : true } )
  . then ( { debug } = > console . log ( debug ) )

การจัดการข้อผิดพลาด

zlFetch กำหนดทิศทางข้อผิดพลาดทั้งหมด 400 และ 500 ไปยังวิธี catch ข้อผิดพลาดมีข้อมูลเดียวกันกับการตอบกลับ

• headers : ส่วนหัวการตอบกลับ
• body : ร่างกายตอบสนอง
• status : สถานะการตอบกลับ
• statusText : ข้อความสถานะการตอบกลับ
• response : การตอบสนองดั้งเดิมจากการดึงข้อมูล

สิ่งนี้ทำให้ zlFetch ใช้งานง่ายสุด ๆ พร้อมคำสัญญา

 zlFetch ( 'some-url' ) . catch ( error => {
  /* Handle error */
} )

// The above request can be written in Fetch like this:
fetch ( 'some-url' )
  . then ( response => {
    if ( ! response . ok ) {
      Promise . reject ( response . json )
    }
  } )
  . catch ( error => {
    /* Handle error */
  } )

การจัดการข้อผิดพลาดง่าย ๆ เมื่อใช้ async / await

zlFetch ช่วยให้คุณสามารถส่งข้อผิดพลาดทั้งหมดไปยังวัตถุ errors ได้ คุณสามารถทำได้โดยเพิ่มตัวเลือก returnError สิ่งนี้มีประโยชน์เมื่อคุณทำงานมากกับ async/await

 const { response , error } = await zlFetch ( 'some-url' , { returnError : true } ) 

คุณสมบัติที่เป็นประโยชน์

ตัวช่วยสตริงแบบสอบถาม

คุณสามารถเพิ่ม query หรือ queries เป็นตัวเลือกได้ และ zlFetch จะสร้างสตริงการสืบค้นให้คุณโดยอัตโนมัติ ใช้สิ่งนี้กับคำขอ GET

 zlFetch ( 'some-url' , {
  queries : {
    param1 : 'value1' ,
    param2 : 'to encode' ,
  } ,
} )

// The above request can be written in Fetch like this:
fetch ( 'url?param1=value1&param2=to%20encode' )

การสร้าง Content-Type ตามเนื้อหา body

zlFetch ตั้งค่า Content-Type อย่างเหมาะสมโดยขึ้นอยู่กับข้อมูล body ของคุณ รองรับข้อมูลสามประเภท:

• วัตถุ
• สตริงการสืบค้น
• ข้อมูลแบบฟอร์ม

หากคุณส่งผ่าน object zlFetch จะตั้งค่า Content-Type เป็น application/json นอกจากนี้ยังจะ JSON.stringify ร่างกายของคุณด้วย ดังนั้นคุณไม่จำเป็นต้องทำเอง

 zlFetch . post ( 'some-url' , {
  body : { message : 'Good game' } ,
} )

// The above request is equivalent to this
fetch ( 'some-url' , {
  method : 'post' ,
  headers : { 'Content-Type' : 'application/json' } ,
  body : JSON . stringify ( { message : 'Good game' } ) ,
} )

zlFetch มีตัวช่วย toObject ที่ให้คุณแปลงข้อมูลแบบฟอร์มเป็นวัตถุได้ ทำให้ง่ายต่อการ zlFetch ด้วยแบบฟอร์ม

 import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )

zlFetch ( 'some-url' , {
  body : toObject ( data ) ,
} )

หากคุณส่งผ่านสตริง zlFetch จะตั้งค่า Content-Type เป็น application/x-www-form-urlencoded

zlFetch ยังมีเมธอด toQueryString ที่สามารถช่วยคุณแปลงอ็อบเจ็กต์เป็นสตริงการสืบค้น เพื่อให้คุณสามารถใช้ตัวเลือกนี้ได้อย่างง่ายดาย

 import { toQueryString } from 'zl-fetch'

zlFetch . post ( 'some-url' , {
  body : toQueryString ( { message : 'Good game' } ) ,
} )

// The above request is equivalent to this
fetch ( 'some-url' , {
  method : 'post' ,
  headers : { 'Content-Type' : 'application/x-www-form-urlencoded' } ,
  body : 'message=Good%20game' ,
} )

หากคุณส่งผ่านข้อมูลแบบฟอร์ม zlFetch จะทำให้ฟังก์ชัน fetch ดั้งเดิมจัดการ Content-Type โดยทั่วไปจะใช้ multipart/form-data กับตัวเลือกเริ่มต้น หากคุณใช้สิ่งนี้ ตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ของคุณสามารถรับ multipart/form-data !

 import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )

zlFetch ( 'some-url' , { body : data } )

// The above request is equivalent to this
fetch ( 'some-url' , { body : data } )

// Your server should be able to receive multipart/form-data if you do this. If you're using Express, you can a middleware like multer to make this possible:
import multer from 'multer'
const upload = multer ( )
app . use ( upload . array ( ) )

การเปลี่ยนแปลงที่ทำลายล้างใน v5.0.0 : หากคุณส่งผ่านส่วนหัว Content-Type zlFetch จะไม่กำหนดรูปแบบเนื้อหาในร่างกายของคุณอีกต่อไป เราหวังว่าคุณจะสามารถส่งผ่านประเภทข้อมูลที่ถูกต้องได้ (เราต้องทำเช่นนี้เพื่อรองรับ API ใหม่ดังกล่าวข้างต้น)

ผู้ช่วยส่วนหัวการอนุญาต

หากคุณระบุคุณสมบัติ auth zlFetch มันจะสร้างส่วนหัวการอนุญาตให้คุณ

หากคุณส่งผ่าน string (โดยทั่วไปสำหรับโทเค็น) มันจะสร้าง Bearer Auth

 zlFetch ( 'some-url' , { auth : 'token12345' } )

// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
  headers : { Authorization : `Bearer token12345` } ,
} )

หากคุณส่งผ่าน object zlFetch จะสร้างการตรวจสอบสิทธิ์พื้นฐานให้กับคุณ

 zlFetch ( 'some-url' , {
  auth : {
    username : 'username'
    password : '12345678'
  }
} )

// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
  headers : { Authorization : `Basic ${ btoa ( 'username:12345678' ) } ` }
} ) ;

การสร้างอินสแตนซ์ zlFetch

คุณสามารถสร้างอินสแตนซ์ของ zlFetch ด้วยตัวเลือกที่กำหนดไว้ล่วงหน้า สิ่งนี้มีประโยชน์อย่างยิ่งหากคุณต้องการส่งคำขอที่มี options หรือ url ที่คล้ายกัน

• จำเป็นต้องมี url
• options เป็นทางเลือก

 import { createZLFetch } from 'zl-fetch'

// Creating the instance
const api = zlFetch ( baseUrl , options )

กรณีทั้งหมดมีวิธีชวเลขเช่นกัน

 // Shorthand methods
const response = api . get ( /* ... */ )
const response = api . post ( /* ... */ )
const response = api . put ( /* ... */ )
const response = api . patch ( /* ... */ )
const response = api . delete ( /* ... */ )

ใหม่ใน v5.0.0

ตอนนี้คุณสามารถใช้อินสแตนซ์ zlFetch ได้โดยไม่ต้องส่ง URL สิ่งนี้มีประโยชน์หากคุณสร้างอินสแตนซ์ที่มีตำแหน่งข้อมูลที่ถูกต้อง

 import { createZLFetch } from 'zl-fetch'

// Creating the instance
const api = zlFetch ( baseUrl , options )

กรณีทั้งหมดมีวิธีชวเลขเช่นกัน

 // Shorthand methods
const response = api . get ( ) // Without URL, without options
const response = api . get ( 'some-url' ) // With URL, without options
const response = api . post ( 'some-url' , { body : 'message=good+game' } ) // With URL, with options
const response = api . post ( { body : 'message=good+game' } ) // Without URL, with options

ตัวจัดการการตอบสนองแบบกำหนดเอง

หากคุณต้องการจัดการการตอบสนองที่ zlFetch ไม่รองรับ คุณสามารถส่ง customResponseParser: true ไปยังตัวเลือกได้ ซึ่งจะส่งคืนการตอบกลับจากคำขอ Fetch ปกติโดยไม่มีการดำเนินการใดๆ เพิ่มเติมจาก zlFetch จากนั้นคุณสามารถใช้ response.json() หรือวิธีการอื่นๆ ได้ตามที่เห็นสมควร

 const response = await zlFetch ( 'url' , {
  customResponseParser : true ,
} )
const data = await response . arrayBuffer ( )