catta

แคตต้า

catta เป็นไคลเอนต์คำของ่าย ๆ สำหรับเบราว์เซอร์ Support Fetch, AJAX, JSONP และแม้แต่ปรับแต่งอะแดปเตอร์ของคุณเอง 中文文档-请点我

• ใช้งานง่ายแทบตาย
• ตัวเลือกและการใช้งานที่เหมือนกันสำหรับอะแดปเตอร์แต่ละตัว
• รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด (รวมถึง IE 9+ พร้อมเวอร์ชันคอมพ์)
• รองรับเบราว์เซอร์ตรวจจับอัตโนมัติเพื่อเลือกอะแดปเตอร์ (รายละเอียดเพิ่มเติม)
• อะแดปเตอร์ที่กำหนดเองเอง
• น้ำหนักเบา เวอร์ชันคอร์น้อยกว่า 2 KB (ขั้นต่ำ + gzip)

รองรับเบราว์เซอร์

• catta-min.js
  • เบราว์เซอร์ที่ทันสมัยทั้งหมด ยกเว้น IE
  • ไม่มี es6+ polyfill ใดๆ เป็นเพียงไลบรารีล้วนๆ
• catta-min-comp.js
  • เบราว์เซอร์ที่ทันสมัยทั้งหมด IE 9+
  • ไลบรารีหลักที่มี Promise และ Object.assign polyfill
  • ไม่มี Formdata polyfill ส่ง {data: HTMLFormElement} ต้องใช้ IE 10+ จึงจะทำงานได้
  • ไม่มี Global Fetch polyfill หากเบราว์เซอร์ไม่รองรับฟีเจอร์นี้ เบราว์เซอร์จะดาวน์เกรดเป็น AJAX

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

การใช้งาน

ติดตั้งก่อน

 # local install
npm install catta --save

จากนั้นนำเข้าไปยังโครงการของคุณ

 // With ES6 - *Recommend*
import catta from 'catta' ;

catta ( 'http://some/url' ) . then ( function ( res ) {
  console . log ( res ) ;
} ) ; 

 // With CommonJS
const catta = require ( 'catta' ) ;

// or catta.ajax or catta.jsonp or catta.fetch
catta . default ( 'http://some/url' ) . then ( function ( res ) {
  console . log ( res ) ;
} ) ; 

 <!-- And also with <script> in HTML - *Not Recommend* -->
< script src =" ./node_modules/catta/dist/catta-min.js " > </ script >
< script >
  // or catta.ajax or catta.jsonp or catta.fetch
  catta . default ( 'http://some/url' ) . then ( function ( res ) {
    console . log ( res ) ;
  } ) ;
</ script > 

ตัวเลือก

เอพีไอ

  import { ajax , fetch , jsonp , getScript } from 'catta' ;

  /**
   * make fetch/ajax/jsonp/getScript request
   * @param {string} url - request url
   * @param {Object} options - request options
   * 
   */
  ajax ( url , options ) ;

  // fetch request
  fetch ( url , options ) ;

  // jsonp request
  jsonp ( url , options ) ;

  // getScript 
  getScript ( url ) ;

ตัวเลือกที่สำคัญ

	คำอธิบาย	พิมพ์	ค่าเริ่มต้น	ดึงข้อมูล	อาแจ็กซ์	เจสันพี
URL	URL คำขอ	เชือก	โมฆะ	โวลต์	โวลต์	โวลต์
วิธี	วิธีการขอ	สตริง { รับ, โพสต์, ใส่, ลบ, หัว }	'รับ'	โวลต์	โวลต์	x
ข้อมูล	ข้อมูลที่ส่งไปยังเซิร์ฟเวอร์	สตริง/วัตถุ/องค์ประกอบแบบฟอร์ม [3]	-	โวลต์	โวลต์	โวลต์

ตัวเลือกรอง

	คำอธิบาย	พิมพ์	ค่าเริ่มต้น	ดึงข้อมูล	อาแจ็กซ์	เจสันพี
พิมพ์	จำกัดประเภทคำขอ	สตริง { ดึงข้อมูล, อาแจ็กซ์, jsonp, สคริปต์ }	'อัตโนมัติ'	-	-	-
หมดเวลา	โยนข้อผิดพลาดการหมดเวลาหลังจาก ไม่กี่วินาที	ตัวเลข	3	- [1]	โวลต์	- [1]
ประเภทผลลัพธ์	ประเภทของผลลัพธ์	{ ข้อความ, json, การตอบกลับ }	ข้อความ	โวลต์	โวลต์	- [2]

รองรับ ! รองรับบางส่วน × ไม่รองรับ

1. ไม่สามารถยกเลิกคำขอ Fetch และ JSONP ได้ การหมดเวลาปัจจุบันเป็นเพียงข้อผิดพลาดในการหมดเวลา

2. ตัวเลือก resultType ไม่สามารถทำงานกับ jsonp ได้ เนื่องจากผลลัพธ์จะต้องเป็นโค้ดจาวาสคริปต์ที่เรียกใช้งานได้

3. รองรับเฉพาะองค์ประกอบแบบฟอร์มที่มี คุณสมบัติ FormData

ตัวเลือกพิเศษ

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

ตัวอย่าง

เรียบง่าย

 import catta from 'catta' ;

catta ( 'http://some/url' ) . then ( function ( res ) {
  console . log ( res ) ;
} ) ; 

พร้อมออฟชั่นเต็มๆ

 import catta from 'catta' ;

catta ( 'http://some/url' , {
  type : 'jsonp' ,
  data : {
    page : 5 ,
    count : 20
  } ,
  timeout : 2 ,
  credential : false ,
  cross : false ,
  
  // sp. options
  jsonp : {
      callbackName : 'myCustomJSONP1'
  }
} )
. then ( res => console . log ( res ) )
. catch ( err => console . log ( err ) ) ; 

ใช้ Fetch / AJAX / JSONP เท่านั้น

 import { fetch } from 'catta' ;

// only use fetch
fetch ( 'http://some/url' , {
  data : { a : 1 }
} ) . then ( function ( res ) {
  console . log ( res ) ;
} ) ; 

ส่วนหัวคำขอที่กำหนดเอง

 import catta from 'catta' ;

catta ( 'http://some/url' , {
  headers : {
    'Content-Type' : 'appliction/json'
  }
} )
. then ( function ( res ) {
  console . log ( res ) ;
} ) ;

เขียนทับการกำหนดค่าส่วนกลาง

 import { globalConfig } from 'catta' ;

// set global config, it will work for each request
globalConfig ( {
  timeout : 10
} ) ;

อะแดปเตอร์แบบกำหนดเอง

อะแดปเตอร์แบบกำหนดเองเป็นเพียงวัตถุที่มีฟังก์ชัน detector และ processor คุณลักษณะนี้ใช้เพื่อสร้าง wrapper ตามคำขอพิเศษของคุณ และให้ catta จัดการมัน รายละเอียดเพิ่มเติมดูตัวอย่างอะแดปเตอร์ mtop

 import { customAdapter } from 'catta' ;
import mtopAdapter from 'catta/lib/custom/mtop' ;

// set mtop adapter
customAdapter ( 'mtop' , mtopAdapter ) ; 

ประกาศอื่นๆ

• ตรวจจับตรรกะของอะแดปเตอร์อัตโนมัติ
  • options.type เฉพาะ ประเภท
  • อะแดปเตอร์แบบกำหนดเองแต่ละตัว
  • รองรับการดึงข้อมูล ? ดึง : อาแจ็กซ์

ใบอนุญาต

ใบอนุญาตเอ็มไอที