catta

chat

catta est un client de requête simple pour le navigateur prenant en charge Fetch, AJAX, JSONP et même personnalisé votre propre adaptateur. 中文文档-请点我

• Très simple à utiliser
• Options et utilisation uniformes pour chaque adaptateur
• Prend en charge tous les navigateurs modernes (y compris IE 9+, avec version comp.)
• Prise en charge de la détection automatique du navigateur pour choisir l'adaptateur (plus de détails)
• Adaptateur personnalisé
• léger, version de base inférieure à 2 Ko (min + gzip)

Prise en charge du navigateur

• catta-min.js
  • Tous les navigateurs modernes, sauf IE
  • Pas de polyfill es6+, juste une pure bibliothèque
• catta-min-comp.js
  • Tous les navigateurs modernes, IE 9+
  • Bibliothèque principale avec Promise et Object.assign polyfill
  • Pas de polyfill Formdata , envoyer {data: HTMLFormElement} nécessite IE 10+ pour fonctionner
  • Pas de polyfill Global Fetch , si le navigateur ne prend pas en charge cette fonctionnalité, il sera rétrogradé vers AJAX

Il est recommandé d'utiliser le pur, si votre projet dispose déjà de ces polyfill ou n'a pas besoin du support IE.

Usage

Installer d'abord

 # local install
npm install catta --save

Puis importez dans votre projet

 // 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 > 

Possibilités

API

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

Options importantes

	Description	Taper	Défaut	Aller chercher	AJAX	JSONP
URL	URL de la demande	chaîne	nul	v	v	v
méthode	méthode de demande	chaîne { obtenir, publier, mettre, supprimer, tête }	'obtenir'	v	v	x
données	les données envoyées au serveur	chaîne/objet/élément de formulaire [3]	{}	v	v	v

Options secondaires

	Description	Taper	Défaut	Aller chercher	AJAX	JSONP
taper	restreindre le type de demande	chaîne { récupérer, ajax, jsonp, script }	'auto'	—	—	—
temps mort	erreur de délai d'attente après quelques secondes	nombre	3	! [1]	v	! [1]
type de résultat	le type de résultat	{ texte, json, réponse }	texte	v	v	! [2]

v Pris en charge ! Partiellement pris en charge × Non pris en charge

1. La récupération et la requête JSONP ne peuvent pas être abandonnées, le délai d'attente actuel est simplement une erreur de délai d'attente.

2. L'option resultType ne peut pas fonctionner avec jsonp, car le résultat doit être du code javascript exécutable

3. Ne prend en charge que l'élément de formulaire avec la fonctionnalité FormData

   ​

Options spéciales

	Propriété	Description	Taper
jsonp	Nom de rappel	définir un nom de rappel personnalisé	chaîne
aller chercher	croix	indiquer si la demande peut avoir une origine croisée	booléen
ajax	-	-	-

Exemples

Simple

 import catta from 'catta' ;

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

Avec toutes les options

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

Utilisez uniquement Fetch / AJAX / JSONP

 import { fetch } from 'catta' ;

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

En-têtes de requête personnalisés

 import catta from 'catta' ;

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

Remplacer la configuration globale

 import { globalConfig } from 'catta' ;

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

Adaptateur personnalisé

Un adaptateur personnalisé n'est qu'un objet doté d'une fonction detector et processor . Cette fonctionnalité est utilisée pour créer un wrapper pour votre demande spéciale et laisser catta le gérer. Pour plus de détails, voir l'exemple d'adaptateur mtop

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

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

Autres avis

• Logique de l'adaptateur de détection automatique
  • options.type spécifiques.type
  • Chaque adaptateur personnalisé
  • Prise en charge de la récupération ? récupérer : ajax

Licence

Licence MIT