thwack

หวด. โซลูชันการดึงข้อมูลสมัยใหม่ขนาดเล็ก

TL;ดร

แท็คคือ:

• ทันสมัย ​​— Thwack เป็นโซลูชันการดึงข้อมูล HTTP ที่สร้างขึ้นสำหรับเบราว์เซอร์สมัยใหม่
• - เล็ก — Thwack มีขนาดเพียง ~1.5k gzipped เท่านั้น
• ?? ชาญฉลาดยิ่งขึ้น — สร้างด้วย JavaScript ที่ทันสมัย
• - คุ้นเคย — Thwack ใช้อินเทอร์เฟซที่คล้ายกับ Axios
• ? พิมพ์ — รวมง่ายกว่าสำหรับโครงการ TypeScript
• รองรับ NodeJS 10 และ 12
• รองรับ React Native

README นี้อยู่ในระหว่างดำเนินการ คุณสามารถถามคำถามฉันได้บน Twitter

การติดตั้ง

$ npm i thwack

หรือ

$ yarn add thwack

ทำไมต้อง Thwack มากกว่า Axios?

Axios นั้นยอดเยี่ยมมากเมื่อเปิดตัวในสมัยนั้น มันทำให้เรามี wrapper ตามสัญญารอบ ๆ XMLHttpRequest ซึ่งใช้งานยาก แต่นั่นก็นานมาแล้วและยุคสมัยก็เปลี่ยนไป เบราว์เซอร์มีความชาญฉลาดมากขึ้น อาจถึงเวลาแล้วที่โซลูชันการดึงข้อมูลของคุณต้องตามทัน?

Thwack ถูกสร้างขึ้นตั้งแต่ต้นจนจบโดยคำนึงถึงเบราว์เซอร์ที่ทันสมัย ด้วยเหตุนี้จึงไม่มีสัมภาระแบบที่ Axios มี Axios มีน้ำหนักประมาณ ~5k gzipped ในทางกลับกัน Thwack นั้นเรียว ~1.5k

พวกเขารองรับ API เดียวกัน แต่มีความแตกต่างบางประการ — ส่วนใหญ่จะอยู่ที่ options — แต่โดยส่วนใหญ่แล้ว มันควรจะสามารถใช้สลับกันได้สำหรับหลายๆ แอปพลิเคชัน

Thwack ไม่ได้พยายามแก้ปัญหาทุกอย่างเหมือนที่ Axios ทำ แต่กลับมอบวิธีแก้ปัญหา 98% ของสิ่งที่ผู้ใช้ต้องการ จริงๆ แทน นี่คือสิ่งที่ทำให้ Thwack มีรอยเท้าที่เบาดั่งขนนก

เกาอันนั้น Thwack ให้พลังในระดับเดียวกับ Axios ด้วยขนาดที่เล็กกว่ามาก และระบบเหตุการณ์ตามคำสัญญาของ Thwack นั้นใช้งานง่ายกว่า

วิธีการ

วิธีการต่อไปนี้สามารถใช้ได้กับอินสแตนซ์ Thwack ทั้งหมด

กำลังดึงข้อมูล

• thwack(url: string [,options: ThwackOptions]): Promise<ThwackResponse>;

• thwack.request(options: ThwackOptions): Promise<ThwackResponse>

• thwack.get(url: string [,options: ThwackOptions]): Promise<ThwackResponse>;

• thwack.delete(url: string [,options: ThwackOptions]): Promise<ThwackResponse>;

• thwack.head(url: string [,options: ThwackOptions]): Promise<ThwackResponse>;

• thwack.post(url: string, data:any [,options: ThwackOptions]): Promise<ThwackResponse>;

• thwack.put(url: string, data:any [,options: ThwackOptions]): Promise<ThwackResponse>;

• thwack.patch(url: string, data:any [,options: ThwackOptions]): Promise<ThwackResponse>;

คุณประโยชน์

• thwack.create(options: ThwackOptions): ThwackInstance;

  วิธี create จะสร้าง (da!) อินสแตนซ์ลูกใหม่ของอินสแตนซ์ Thwack ปัจจุบันพร้อม options ที่กำหนด

• thwack.getUri(options: ThwackOptions): string;

  ความละเอียด URL Thwacks เป็นไปตามมาตรฐาน RFC-3986 ไม่ใช่ของ Axios มันขับเคลื่อนโดย @thwack/resolve

ผู้ฟังเหตุการณ์

Thwack รองรับประเภทเหตุการณ์ต่อไปนี้: request , response , data และ error

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับระบบกิจกรรมของ Thwack โปรดดูกิจกรรมของ Thwack ด้านล่าง

• thwack.addEventListener(type: string, callback: (event:ThwackEvent) => Promise<any> ): void;

• thwack.removeEventListener(type: string, callback: (event:ThwackEvent) => Promise<any> ): void;

วิธีการแบบคงที่

เห็นพ้องด้วย

Thwack มีฟังก์ชันตัวช่วยต่อไปนี้สำหรับการร้องขอพร้อมกัน ส่วนใหญ่มีไว้สำหรับความเข้ากันได้ของ Axios ดูส่วน "วิธีการ" ด้านล่างสำหรับตัวอย่างการใช้งาน

• thwack.all(Promise<ThwackResponse>[])

• thwack.spread(callback<results>)

ThwackOptions

อาร์กิวเมนต์ options มีคุณสมบัติดังต่อไปนี้

url

นี่เป็น URL ที่มีคุณสมบัติครบถ้วนหรือเป็น URL ที่เกี่ยวข้อง

baseURL

กำหนด URL พื้นฐานที่จะใช้ในการสร้าง URL แบบเต็มจาก url ด้านบน ต้องเป็น URL ที่สมบูรณ์หรือ undefined ค่าเริ่มต้นเป็น origin + pathname ของหน้าเว็บปัจจุบันหากทำงานในเบราว์เซอร์หรือ undefined บน Node หรือ React Native

ตัวอย่างเช่น หากคุณทำสิ่งนี้:

 thwack ( 'foo' , {
  baseURL : 'http://example.com' ,
} ) ;

URL ที่ดึงมาจะเป็น:

 http://example.com/foo

method

สตริงที่มีหนึ่งในวิธี HTTP ต่อไปนี้: get , post , put , patch , delete หรือ head

data

หาก method เป็น post , put หรือ patch นี่คือข้อมูลที่จะใช้ในการสร้างเนื้อหาคำขอ

headers

นี่คือที่ที่คุณสามารถวางส่วนหัวคำขอ HTTP เสริมใดๆ ได้ ส่วนหัวใดๆ ที่คุณระบุที่นี่จะผสานเข้ากับค่าส่วนหัวของอินสแตนซ์ใดๆ

ตัวอย่างเช่น หากเราตั้งค่าอินสแตนซ์ Thwack ดังนี้:

 const api = thwack . create ( {
  headers : {
    'x-app-name' : 'My Awesome App' ,
  } ,
} ) ;

หลังจากนั้น เมื่อคุณใช้อินสแตนซ์ คุณจะโทรในลักษณะนี้:

 const { data } = await api . get ( 'foo' , {
  headers : {
    'some-other-header' : 'My Awesome App' ,
  } ,
} ) ;

ส่วนหัวที่จะส่งคือ:

 x-app-name: My Awesome App
some-other-header': 'My Awesome App'

defaults

ซึ่งจะทำให้คุณสามารถอ่าน/ตั้งค่าตัวเลือกเริ่มต้นสำหรับอินสแตนซ์นี้และอินสแตนซ์ย่อยใดๆ ก็ได้

ตัวอย่าง:

 thwack . defaults . baseURL = 'https://example.com/api' ;

สำหรับอินสแตน defaults คือออบเจ็กต์เดียวกันที่ส่งเพื่อ create ตัวอย่างเช่น ผลลัพธ์ต่อไปนี้จะแสดงผลเป็น "https://example.com/api"

 const instance = thwack . create ( {
  baseURL : 'https://example.com/api' ,
} ) ;
console . log ( instance . defaults . baseURL ) ;

โปรดทราบว่าการตั้งค่า defaults บนอินสแตนซ์ (หรือแม้แต่การส่งผ่าน options ) ไปยังอินสแตนซ์จะไม่ส่งผลกระทบต่อพาเรนต์ ดังนั้นสำหรับตัวอย่างต่อไปนี้ thwack.defaults.baseURL จะยังคงเป็น "https://api1.example.net/"

 thwack . defaults . baseURL = 'https://api1.example.net/' ;
const instance = thwack . create ( ) ;
instance . defaults . baseURL = 'https://example.com/api' ;

console . log ( thwack . defaults . baseURL ) ;

params

นี่คือออบเจ็กต์ที่ไม่บังคับซึ่งมีคู่คีย์/ค่าที่จะใช้ในการสร้าง URL การดึงข้อมูล มีส่วน :key ของ baseURL หรือ url ไม่ โดยจะถูกแทนที่ด้วยค่าของคีย์ที่ตรงกัน ตัวอย่างเช่น หากคุณทำสิ่งนี้:

 thwack ( 'orders/:id' , {
  params : { id : 123 } ,
  baseURL : 'http://example.com' ,
} ) ;

URL ที่ดึงมาจะเป็น:

 http://example.com/orders/123

หากคุณไม่ระบุ :name หรือมี param มากกว่า :name s คีย์/ค่าที่เหลือจะถูกตั้งค่าเป็นพารามิเตอร์การค้นหา (เช่น ?key=value )

maxDepth

ระดับสูงสุดของคำขอแบบเรียกซ้ำที่สามารถทำได้ใน callbck ก่อนที่ Thwack จะแสดงข้อผิดพลาด สิ่งนี้ใช้เพื่อป้องกันไม่ให้การเรียกกลับเหตุการณ์ทำให้เกิดการวนซ้ำ ซึ่งหากส่ง request อื่นโดยไม่มีการป้องกันที่เหมาะสม ค่าเริ่มต้น = 3

responseType

ตามค่าเริ่มต้น Thwack จะกำหนดวิธีการถอดรหัสข้อมูลการตอบสนองโดยอัตโนมัติตามค่าของ content-type ส่วนหัวการตอบกลับ อย่างไรก็ตาม หากเซิร์ฟเวอร์ตอบสนองด้วยค่าที่ไม่ถูกต้อง คุณสามารถแทนที่ parser ได้โดยการตั้ง responseType ค่าที่ถูกต้อง ได้แก่ arraybuffer , document (เช่น formdata ), json , text , stream และ blob ค่าเริ่มต้นเป็นอัตโนมัติ

สิ่งที่ Thwack ส่งคืนจะถูกกำหนดโดยตารางต่อไปนี้ คอลัมน์ "วิธีการดึงข้อมูล" คือสิ่งที่ได้รับการแก้ไขใน data หากคุณไม่ระบุ responseType Thwack จะกำหนดวิธีการดึงข้อมูลโดยอัตโนมัติตาม content-type และตาราง responseParserMap (ดูด้านล่าง)

ประเภทเนื้อหา	responseType	วิธี fetch
application/json	json	response.json()
multipart/form-data	formdata	response.formData()
text/event-stream	stream	ส่งกลับ response.body เป็น data โดยไม่ต้องประมวลผล
	blob	response.blob()
	arraybuffer	response.arrayBuffer()
*/*	text	response.text()

หมายเหตุ: ขณะนี้ยังไม่รองรับ stream ใน React Native เนื่องจาก #27741

responseParserMap

อีกวิธีที่มีประโยชน์ในการพิจารณาว่าจะใช้ตัวแยกวิเคราะห์การตอบสนองใดคือการใช้ responseParserMap ช่วยให้คุณสามารถตั้งค่าการแมประหว่าง content-type ที่เป็นผลลัพธ์จากส่วนหัวการตอบกลับและประเภทตัวแยกวิเคราะห์

Thwack ใช้แผนที่ต่อไปนี้เป็นค่าเริ่มต้น ซึ่งอนุญาตให้ถอดรหัส json และ formdata หากไม่มีรายการที่ตรงกัน โปรแกรมแยกวิเคราะห์การตอบสนองจะใช้ค่าเริ่มต้นเป็น text คุณสามารถระบุค่าเริ่มต้นได้โดยการตั้งค่าปุ่มพิเศษ */*

{
  "application/json" : " json " ,
  "multipart/form-data" : " formdata " ,
  "*/*" : " text "
} ;

ค่าใดๆ ที่คุณระบุใน responseParserMap จะถูกรวมเข้ากับแผนที่เริ่มต้น กล่าวคือคุณสามารถแทนที่ค่าเริ่มต้นและ/หรือเพิ่มค่าใหม่ได้

ตัวอย่างเช่น สมมติว่าคุณต้องการดาวน์โหลดรูปภาพลงในหยด คุณสามารถตั้ง baseURL เป็นจุดสิ้นสุด API ของคุณและ responseParserMap ที่จะดาวน์โหลดรูปภาพประเภทใดก็ได้เป็น blobs แต่จะยังคงอนุญาตให้ดาวน์โหลด json (เนื่องจากนี่เป็นค่าเริ่มต้นสำหรับ content-type: application/json )

 import thwack from 'thwack' ;

thwack . defaults . responseParserMap = { 'image/*' : 'blob' } ;

URL ใดๆ ที่คุณดาวน์โหลดด้วยประเภทเนื้อหา image/* (เช่น image/jpeg , image/png ฯลฯ ) จะถูกแยกวิเคราะห์ด้วย blob parser

 const getBlobUrl = async ( url ) => {
  const blob = ( await thwack . get ( url ) ) . data ;
  const objectURL = URL . createObjectURL ( blob ) ;
  return objectURL ;
} ;

ดูตัวอย่างนี้ที่ทำงานบน CodeSandbox

โปรดทราบว่าคุณสามารถใช้เทคนิคนี้กับสิ่งอื่นนอกเหนือจากรูปภาพได้

อย่างที่คุณเห็น การใช้ responseParserMap เป็นวิธีที่ดีในการขจัดความจำเป็นในการตั้งค่า responseType สำหรับการโทร Thwack ที่แตกต่างกัน

validateStatus

ฟังก์ชันเสริมนี้ใช้เพื่อกำหนดว่ารหัสสถานะใดที่ Thwack ใช้เพื่อคืนสัญญาหรือโยนทิ้ง ผ่าน status การตอบกลับแล้ว หากฟังก์ชันนี้ส่งคืนค่าความจริง แสดงว่าสัญญาได้รับการแก้ไข มิฉะนั้นสัญญาจะถูกปฏิเสธ

ฟังก์ชั่นเริ่มต้นจะส่งสำหรับสถานะใด ๆ ที่ไม่ได้อยู่ใน 2xx (เช่น 200-299)

paramsSerializer

นี่เป็นฟังก์ชันเสริมที่ Thwack จะเรียกใช้เพื่อทำให้ params เป็นอนุกรม ตัวอย่างเช่น เมื่อกำหนดวัตถุ {a:1, b:2, foo: 'bar'} ก็ควรทำให้เป็นอนุกรมกับสตริง a=1&b=2&foo=bar

สำหรับคนส่วนใหญ่ โปรแกรมซีเรียลไลเซอร์เริ่มต้นน่าจะใช้งานได้ดี นี่เป็นหลักสำหรับเคส Edge และความเข้ากันได้ของ Axios

โปรดทราบว่าตัวซีเรียลไลเซอร์เริ่มต้นจะเรียงตามตัวอักษรของพารามิเตอร์ ซึ่งเป็นแนวปฏิบัติที่ดีในการปฏิบัติตาม อย่างไรก็ตาม หากวิธีนี้ใช้ไม่ได้ผลกับสถานการณ์ของคุณ คุณสามารถหมุนซีเรียลไลเซอร์ของคุณเองได้

resolver

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

ThwackResponse

status

number ที่แสดงถึงรหัสสถานะ HTTP 3 หลักที่ได้รับ

• 1xx - การตอบกลับอย่างให้ข้อมูล
• 2xx - สำเร็จ
• 3xx - การเปลี่ยนเส้นทาง
• 4xx - ข้อผิดพลาดของไคลเอ็นต์
• 5xx - ข้อผิดพลาดของเซิร์ฟเวอร์

ok

boolean ที่ตั้งค่าเป็นจริงคือรหัส status ในช่วง 2xx (เช่น สำเร็จ) ค่านี้ไม่ได้รับผลกระทบจาก validateStatus

statusText

string ที่แสดงข้อความของรหัส status คุณควรใช้รหัส status (หรือ ok ) ในตรรกะของโปรแกรมใดๆ

headers

ออบเจ็กต์คีย์/ค่าที่มีส่วนหัว HTTP ที่ส่งคืน ส่วนหัวที่ซ้ำกันจะถูกต่อเข้าด้วยกันเป็นส่วนหัวเดียวโดยคั่นด้วยเครื่องหมายอัฒภาค

data

ซึ่งจะเก็บเนื้อหาที่ส่งคืนของการตอบกลับ HTTP หลังจากที่สตรีมและแปลงแล้ว ข้อยกเว้นเพียงอย่างเดียวคือหากคุณใช้ responseType ของ stream ซึ่งในกรณีนี้ data จะถูกตั้งค่าโดยตรงไปยังองค์ประกอบ body

หาก ThwackResponseError ถูกส่งออกไป data จะเป็นการแสดงข้อความธรรมดาของเนื้อหาการตอบกลับ

options

ออบเจ็กต์ options ที่สมบูรณ์ที่ประมวลผลคำขอ options นี้จะถูกรวมเข้ากับอินสแตนซ์หลัก รวมถึง defaults ด้วย

response

ออบเจ็กต์ Response HTTP ที่สมบูรณ์ซึ่งส่งคืนโดย fetch หรือ response จากการเรียกกลับเหตุการณ์สังเคราะห์

ThwackResponseError

หากการตอบสนองจากคำขอ Thwack ส่งผลให้เกิดรหัส status ที่ไม่ใช่ 2xx (เช่น 404 ไม่พบ) ThwackResponseError จะถูกส่งออกไป

หมายเหตุ: อาจเป็นไปได้ว่าข้อผิดพลาดประเภทอื่นๆ อาจถูกโยนทิ้งไป (เช่น การเรียกกลับตัวฟังเหตุการณ์ที่ไม่ถูกต้อง) ดังนั้นจึงควรซักถามข้อผิดพลาดที่จับได้เพื่อดูว่าเป็นประเภท ThwackResponseError หรือไม่

 try {
  const { data } = await thwack . get ( someUrl )
} catch ( ex ) {
  if ( ex instanceof thwack . ThwackResponseError )
    const { status , message } = ex ;
    console . log ( `Thwack status ${ status } : ${ message } ` ) ;
  } else {
    throw ex ; // If not, rethrow the error
  }
}

ThwackResponseError มีคุณสมบัติทั้งหมดของ Error JavaScript ปกติ บวกกับคุณสมบัติ thwackResponse ที่มีคุณสมบัติเดียวกันกับสถานะความสำเร็จ

อินสแตนซ์

อินสแตนซ์ที่สร้างใน Thwack จะขึ้นอยู่กับอินสแตนซ์หลัก ตัวเลือกเริ่มต้นของผู้ปกครองจะส่งผ่านอินสแตนซ์ต่างๆ สิ่งนี้มีประโยชน์สำหรับการตั้งค่าตัวเลือกในพาเรนต์ที่อาจส่งผลต่อรายการย่อย เช่น baseURL

ในทางกลับกัน ผู้ปกครองสามารถใช้ addEventListener เพื่อตรวจสอบบุตรหลานของตนได้ (ดูตัวอย่างวิธีการบันทึกการเรียก API ทุกครั้งด้านล่าง)

เหตุการณ์ขัดข้อง

เมื่อรวมกับอินสแตนซ์แล้ว ระบบเหตุการณ์ Thwack คือสิ่งที่ทำให้ Thwack ทรงพลังอย่างยิ่ง คุณสามารถฟังเหตุการณ์ต่างๆ ได้

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

เหตุการณ์ request

เมื่อใดก็ตามที่ส่วนใดส่วนหนึ่งของแอปพลิเคชันเรียกใช้วิธีการดึงข้อมูลอย่างใดอย่างหนึ่ง เหตุการณ์ request จะเริ่มทำงาน ผู้ฟังใด ๆ จะได้รับวัตถุ ThwackRequestEvent ซึ่งมี options ของการโทรใน event.options ผู้ฟังเหตุการณ์เหล่านี้สามารถทำบางสิ่งง่ายๆ เช่น (บันทึกเหตุการณ์) หรือซับซ้อนเท่ากับการป้องกันคำขอและส่งคืนการตอบกลับด้วย (จำลองข้อมูล)

 // callback will be called for every request made in Thwack
thwack . addEventListener ( 'request' , callback ) ;

โปรดทราบว่าการโทรกลับสามารถเป็น async ทำให้คุณสามารถเลื่อน Thwack ออกไปได้ เช่น คุณสามารถออกไปดึงข้อมูล URL อื่นก่อนดำเนินการต่อ

เหตุการณ์ response

เหตุการณ์จะเกิดขึ้น หลังจาก ได้รับส่วนหัว HTTP แต่ ก่อนที่ เนื้อหาจะถูกสตรีมและแยกวิเคราะห์ ผู้ฟังจะได้รับออบเจ็กต์ ThwackResponseEvent พร้อมคีย์ thwackResponse ที่ตั้งค่าไว้สำหรับการตอบกลับ

เหตุการณ์ data

เหตุการณ์จะเกิดขึ้นหลังจากสตรีมเนื้อหาและแยกวิเคราะห์แล้ว มันจะเริ่มทำงานก็ต่อเมื่อการดึงข้อมูลส่งคืนรหัสสถานะ 2xx ผู้ฟังจะได้รับวัตถุ ThwackDataEvent โดยมีคีย์ thwackResponse ตั้งค่าเป็นการตอบสนอง

เหตุการณ์ error

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

โหนดJS

Thwack จะทำงานบน NodeJS แต่ต้องมี polyfill สำหรับ window.fetch โชคดีที่มีโพลีฟิลที่ยอดเยี่ยมที่เรียกว่า node-fetch ที่คุณสามารถใช้ได้

หากคุณใช้ NodeJS เวอร์ชัน 10 คุณจะต้องมี polyfill สำหรับ Array#flat และ Object#fromEntries NodeJS เวอร์ชัน 11+ มีวิธีการเหล่านี้และไม่ต้องใช้โพลีฟิล

คุณสามารถจัดเตรียมโพลีฟิลเหล่านี้ด้วยตนเอง หรือใช้การนำเข้าตามความสะดวกอย่างใดอย่างหนึ่งต่อไปนี้แทน หากคุณใช้งาน NodeJS 11+ ให้ใช้:

 import thwack from 'thwack/node' ; // NodeJS version 12+

หากคุณใช้งานบน NodeJS 10 ให้ใช้:

 import thwack from 'thwack/node10' ; // NodeJS version 10

หากคุณต้องการจัดเตรียมโพลีฟิลเหล่านี้ด้วยตนเอง หากต้องการใช้ Thwack คุณต้องนำเข้าจาก thwack/core และตั้ง fetch เป็นค่าเริ่มต้นสำหรับ fetch เช่นนั้น

 import thwack from 'thwack/code' ;
thwack . defaults . fetch = global . fetch ;

ซึ่งควรทำในโค้ดเริ่มต้นแอปของคุณ ซึ่งโดยทั่วไป index.js

หมายเหตุ: ไม่รองรับ responseType ของ blob บน NodeJS

ตอบสนองพื้นเมือง

Thwack เข้ากันได้กับ React Native และไม่จำเป็นต้องเติมโพลีฟิลเพิ่มเติม ดูด้านล่างสำหรับแอปตัวอย่างที่เขียนด้วย React Native

หมายเหตุ: React Native ไม่รองรับ stream เนื่องจาก #27741

วิธี

คำขอหลายรายการพร้อมกัน

คุณสามารถใช้ thwack.all() และ thwack.spread() เพื่อส่งคำขอพร้อมกันได้ ข้อมูลจะถูกนำเสนอต่อการโทรกลับของคุณเป็นอาร์เรย์เดียว

ที่นี่เราแสดงข้อมูลสำหรับผู้ใช้ GitHub สองคน

 function displayGitHubUsers ( ) {
  return thwack
    . all ( [
      thwack . get ( 'https://api.github.com/users/donavon' ) ,
      thwack . get ( 'https://api.github.com/users/revelcw' ) ,
    ] )
    . then (
      thwack . spread ( ( ... results ) => {
        const output = results
          . map (
            ( { data } ) => ` ${ data . login } has ${ data . public_repos } public repos`
          )
          . join ( 'n' ) ;
        console . log ( output ) ;
      } )
    ) ;
}

โปรดทราบว่าสิ่งเหล่านี้เป็นเพียงฟังก์ชันช่วยเหลือ หากคุณใช้ async / await คุณสามารถเขียนสิ่งนี้ได้โดยไม่ต้องใช้ตัวช่วย Thwack โดยใช้ Promise.all

 async function displayGitHubUsers ( ) {
  const results = await Promise . all ( [
    thwack . get ( 'https://api.github.com/users/donavon' ) ,
    thwack . get ( 'https://api.github.com/users/revelcw' ) ,
  ] ) ;
  const output = results
    . map ( ( { data } ) => ` ${ data . login } has ${ data . public_repos } public repos` )
    . join ( 'n' ) ;
  console . log ( output ) ;
}

คุณสามารถดูการดำเนินการนี้ได้ใน CodeSandbox

(การสาธิตที่ได้รับแรงบันดาลใจจากโพสต์หยดบน axios/fetch)

การยกเลิกคำขอ

ใช้ AbortController เพื่อยกเลิกการร้องขอโดยส่ง signal ในตัวเลือก thwack

ในเบราว์เซอร์ คุณสามารถใช้ AbortController ในตัวได้

 import thwack from 'thwack' ;

const controller = new AbortController ( ) ;
const { signal } = controller ;

thwack ( url , { signal } ) . then ( handleResponse ) . catch ( handleError ) ;

controller . abort ( ) ;

ใน NodeJS คุณสามารถใช้บางอย่างเช่น abort-controller

 import thwack from 'thwack' ;
import AbortController from 'abort-controller' ;

const controller = new AbortController ( ) ;
const { signal } = controller ;

thwack ( url , { signal } ) . then ( handleResponse ) . catch ( handleError ) ;

controller . abort ( ) ;

ในกรณีที่คุณต้องการดำเนินการบางอย่างตามคำขอยกเลิก คุณสามารถฟังเหตุการณ์ abort โดยส่ง signal ได้เช่นกัน:

 signal . addEventListener ( 'abort' , handleAbort ) ;

บันทึกทุกคำขอ

เพิ่ม addEventListener('request', callback) และบันทึกแต่ละคำขอไปยังคอนโซล

 import thwack from 'thwack' ;

thwack . addEventListener ( 'request' , ( event ) => {
  console . log ( 'hitting URL' , thwack . getUri ( event . options ) ) ;
} ) ;

หากคุณใช้ React นี่คือ Hook ที่คุณสามารถ "ใช้" ในแอปของคุณเพื่อทำสิ่งเดียวกันให้สำเร็จ

 import { useEffect } from 'react' ;
import thwack from 'thwack' ;

const logUrl = ( event ) => {
  const { options } = event ;
  const fullyQualifiedUrl = thwack . getUri ( options ) ;
  console . log ( `hitting ${ fullyQualifiedUrl } ` ) ;
} ;

const useThwackLogger = ( ) => {
  useEffect ( ( ) => {
    thwack . addEventListener ( 'request' , logUrl ) ;
    return ( ) => thwack . removeEventListener ( 'request' , logUrl ) ;
  } , [ ] ) ;
} ;

export default useThwackLogger ;

นี่คือข้อมูลโค้ดเกี่ยวกับวิธีการใช้งาน

 const App = ( ) = {
  useThwackLogger ( )

  return (
    < div >
      ...
    </ div >
  )
}

ส่งคืนข้อมูลจำลอง

สมมติว่าคุณมีแอปที่ส่งคำขอข้อมูลผู้ใช้บางส่วน หากแอปเข้าถึง URL ที่ระบุ (เช่น users ) และค้นหา ID ผู้ใช้เฉพาะ (เช่น 123 ) คุณต้องการที่จะป้องกันไม่ให้คำขอกระทบเซิร์ฟเวอร์และเยาะเย้ยผลลัพธ์แทน

status ใน ThwackResponse มีค่าเริ่มต้นอยู่ที่ 200 ดังนั้น เว้นแต่คุณจะต้องจำลองการตอบสนองที่ไม่โอเค คุณก็แค่ส่งคืน data เท่านั้น

 thwack . addEventListener ( 'request' , async ( event ) => {
  const { options } = event ;
  if ( options . url === 'users' && options . params . id === 123 ) {
    // tells Thwack to use the returned value instead of handling the event itself
    event . preventDefault ( ) ;

    // stop other listeners (if any) from further processing
    event . stopPropagation ( ) ;

    // because we called `preventDefault` above, the caller's request
    // will be resolved to this `ThwackResponse` (defaults to status of 200 and ok)
    return new thwack . ThwackResponse (
      {
        data : {
          name : 'Fake Username' ,
          email : '[email protected]' ,
        } ,
      } ,
      options
    ) ;
  }
} ) ;

แปลง DTO เป็นโมเดล

บ่อยครั้ง แนะนำให้แปลง DTO (Data Transfer Object) เป็นสิ่งที่ไคลเอ็นต์ใช้งานได้ง่ายขึ้น ในตัวอย่างนี้ด้านล่าง เราแปลง DTO ที่ซับซ้อนเป็น firstName , lastName , avatar และ email องค์ประกอบข้อมูลอื่นๆ ที่ส่งคืนจากการเรียก API แต่แอปพลิเคชันไม่จำเป็นจะถูกละเว้น

คุณสามารถดูตัวอย่างการแปลง DTO การบันทึก และการส่งคืนข้อมูลปลอมได้ในแอปตัวอย่างนี้

คุณสามารถดูซอร์สโค้ดได้บน CodeSandbox

โหลดรูปภาพเป็น Blob

ในตัวอย่างนี้ เรามี React Hook ที่โหลดรูปภาพเป็น Blob URL มันแคช URL ไปยังการแมป URL ของ Blob ในที่จัดเก็บเซสชัน เมื่อโหลดแล้ว การรีเฟรชหน้าจะโหลดรูปภาพจาก Blob URL ทันที

 const useBlobUrl = ( imageUrl ) => {
  const [ objectURL , setObjectURL ] = useState ( '' ) ;

  useEffect ( ( ) => {
    let url = sessionStorage . getItem ( imageUrl ) ;

    async function fetchData ( ) {
      if ( ! url ) {
        const { data } = await thwack . get ( imageUrl , {
          responseType : 'blob' ,
        } ) ;
        url = URL . createObjectURL ( data ) ;
        sessionStorage . setItem ( imageUrl , url ) ;
      }
      setObjectURL ( url ) ;
    }

    fetchData ( ) ;
  } , [ imageUrl ] ) ;

  return objectURL ;
} ;

ดูตัวอย่างนี้ใน CodeSandbox

การเลือกเส้นทาง

ขณะนี้คุณมีจุดสิ้นสุด REST ที่ https://api.example.com สมมติว่าคุณได้เผยแพร่ตำแหน่งข้อมูล REST ใหม่ไปยัง URL อื่น และต้องการเริ่มกำหนดเส้นทางการรับส่งข้อมูลเครือข่าย 2% ไปยังเซิร์ฟเวอร์ใหม่เหล่านี้อย่างช้าๆ

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

เราสามารถทำได้โดยการแทนที่ options.url ใน request event Listener ดังนี้

 thwack . addEventListener ( 'request' , ( event ) => {
  if ( Math . random ( ) >= 0.02 ) {
    return ;
  }

  // the code will be executed for approximately 2% of the requests
  const { options } = event ;
  const oldUrl = thwack . getUri ( options ) ;
  const url = new URL ( '' , oldUrl ) ;
  url . origin = 'https://api2.example.com' ; // point the origin at the new servers
  const newUrl = url . href ; // Get the fully qualified URL
  event . options = { ... event . options , url : newUrl } ; // replace `options`]
} ) ;

โต้ตอบแอปตัวอย่างเนทีฟ

นอกจาก use-thwack แล้ว การเขียนแอปดึงข้อมูลสำหรับ React Native ยังไม่มีอะไรง่ายไปกว่านี้อีกแล้ว

ดูแอปทั้งหมดที่ทำงานบน Expo

เครดิต

Thwack ได้รับแรงบันดาลใจ อย่างมาก จาก Axios ขอบคุณแมตต์!

ใบอนุญาต

ได้รับอนุญาตภายใต้ MIT

ผู้ร่วมให้ข้อมูล

ขอขอบคุณผู้คนที่แสนวิเศษเหล่านี้ (คีย์อีโมจิ):

โดนาวอน เวสต์ - - - - -	เจเรมี ไทซ์	ยูไรมา เอสเตเวซ	เจเรมี บาร์การ์	บรูค สการ์เลตต์ ยาลอฟ	คาร์ล ฮอร์กี้	โคจิ
ทอม ไบเรอร์	เอียน ซูเธอร์แลนด์	เบลค โยเดอร์	ไรอัน ฮินชีย์	มิโร ดอจคิช	ซานติเซวิช

โครงการนี้เป็นไปตามข้อกำหนดของผู้มีส่วนร่วมทั้งหมด ยินดีต้อนรับการบริจาคใด ๆ !