catta超易用的浏览器请求框架-技术圈

catta

catta 是一个轻量级的 Javascript 浏览器请求框架，支持 Fetch，AJAX，JSONP，甚至支持自定义的请求方式。

使用非常非常非常简单

支持自动检测浏览器来选择请求方式

统一各种请求方式的参数

支持自定义请求方式

体积很小，压缩后小于 3KB！

使用方式

安装

# 本地化安装

npm install catta --save

引入

// ES6方式 - *推荐*

import catta from 'catta';



catta('./data/simple.json').then(function (res) {

  console.log(res);

});

// CommonJS方式

const catta = require('catta');



catta('./data/simple.json').then(function (res) {

  console.log(res);

});

<!-- 标签引入HTML - *不推荐* -->

<script src="./node_modules/catta/dist/catta.js"></script>

<script>

  catta('./data/simple.json').then(function (res) {

    console.log(res);

  });

</script>

Options

Common Options

	Description	Type	Fetch	AJAX	JSONP
target	限定请求方式	string	v	v	v
type	限制请求方式	{ fetch, ajax, jsonp }	—	—	—
method	请求方法	{ get , post }	v	v	v
data	发送到服务端的数据	Object/Form Element [3]	v	v	v
timeout	请求超时时间	number	! [1]	v	! [1]
resultType	返回值类型	{ text, json, response }	v	! [2]	! [2]
cross	是否允许跨域请求	boolean	v	v	v
withCookie	跨域请求是否携带 Cookie	boolean	v	v	v

v 支持 ! 部分支持 × 不支持

Fetch 和 JSONP 请求不支持提前终止，所以仅仅会在超时后报错，请求仍会继续

response 参数仅支持 Fetch 请求

仅通过 FormData 来支持文件上传（即 data 参数直接传 form element）

示例

最简单形式

import catta from 'catta';



catta('./data/simple.json').then(function (res) {

  console.log(res);

});

带参数的形式

import catta from 'catta';



catta({

  target: './data/complex.json',

  data: {

    page: 5,

    count: 20

  },

  timeout: 2, 

  type: 'ajax',

  cross: true,

  withCookie: false

})

.then(res => console.log(res))

.catch(err => console.log(err));

单独使用 Fetch / AJAX / JSONP

import catta, {ajax} from 'catta';



catta.ajax('./data/simple.json').then(function (res) {

  console.log(res);

});



// same as



ajax('./data/simple.json').then(function (res) {

  console.log(res);

});

自定义请求方式

一个自定义的请求方式就是一个原生对象，对象含有 detector 和 processor 两个方法.更多细节参见 mtop 请求方式示例

import {globalConfig, customAdapter} from 'catta';

import mtopAdapter from 'catta/lib/custom/mtop';



// 设置全局配置，这个配置会在每次请求时均生效

globalConfig({

  timeout: 10

});



// 配置自定义请求方式 "mtop"

customAdapter('mtop', mtopAdapter);

注意

自动选择请求方式的逻辑
- 指定 options.type
- 匹配到自定义请求方式
- 如果支持 Fetch，则使用 fetch，否则降级为 ajax

许可

MIT License