zl fetch
v6.0.6
zlFetch เป็น wrapper สำหรับการดึงข้อมูลที่ช่วยให้คุณส่งคำขอได้อย่างสะดวก
คุณสมบัติของมันมีดังนี้:
การปรับปรุงคุณภาพชีวิตผ่านฟังก์ชัน fetch ดั้งเดิม
response.json() , response.text() หรือ response.blob()catch โดยอัตโนมัติawait - ข้อผิดพลาดสามารถส่งคืนได้ ดังนั้นคุณจึงไม่ต้องเขียนบล็อก try/catch การปรับปรุงเพิ่มเติมเหนือฟังก์ชัน fetch ดั้งเดิม
Content-Type จะถูกตั้งค่าโดยอัตโนมัติตามเนื้อหา bodyheaders body status อื่นๆ อีกมากมายGET , POST , PUT , PATCH และ DELETEauth หมายเหตุ: zlFetch เป็นไลบรารี ESM ตั้งแต่ v4.0.0
# 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 ) )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 ที่มีการร้องขอที่กำลังสร้างอยู่
urlmethodheadersbody 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¶m2=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 ด้วยตัวเลือกที่กำหนดไว้ล่วงหน้า สิ่งนี้มีประโยชน์อย่างยิ่งหากคุณต้องการส่งคำขอที่มี options หรือ url ที่คล้ายกัน
urloptions เป็นทางเลือก 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 ( )
