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
评论