Totte 是一个基于 Fetch API 的轻量级 JavaScript 网络请求库,它可以在任何支持 fetch
的环境中使用。
使用其他语言阅读:English | 简体中文
Important
Totte 是一个纯 ESM 包,如果你在自己的项目中使用它遇到了困难,可以 查看这里。
<script type="module">
import totte from 'https://esm.sh/totte';
</script>
或者
<script type="importmap">
{
"imports": {
"totte": "https://esm.sh/totte"
}
}
</script>
<script type="module">
import totte from 'totte';
</script>
你也可以根据自己的喜好来使用其它 CDN,例如 jsDelivr 和 UNPKG。
npm install totte
import totte from 'totte';
// Request GET
const result1 = await totte('https://example.org/products.json');
// Request POST
const result2 = await totte.post('https://example.org/post', {
username: 'example',
});
// Request FormData
const result3 = await totte.post(
'https://example.org/post',
{
username: 'example',
},
{
headers: {
'Content-Type': 'multipart/form-data',
},
},
);
与 fetch
相比,totte
提供的 API 更加简便、灵活。
// GET Request
const response1 = await fetch('https://example.org/products.json');
const json1 = await response1.json();
// POST Request
const response2 = await fetch('https://example.org/post', {
method: 'POST',
body: JSON.stringify({
username: 'example',
}),
});
const json2 = await response2.json();
// Request FormData
const formData = new FormData();
formData.append('username', 'example');
const response3 = await fetch('https://example.org/post', {
method: 'POST',
body: formData,
headers: {
'Content-Type': 'multipart/form-data',
},
});
const json3 = await response3.json();
你还可以使用 Totte
类或者 create
来构建新的实例:
import totte from 'totte';
const request = totte.create({
origin: 'https://example.org',
});
const result = await totte('/products.json');
import { Totte } from 'totte';
const request = new Totte(({
origin: 'https://example.org',
});
const result = await totte('/products.json');
totte(init, config?)
totte.get(url, payload?, options?)
totte.post(url, payload?, options?)
totte.put(url, payload?, options?)
totte.patch(url, payload?, options?)
totte.head(url, payload?, options?)
totte.delete(url, payload?, options?)
totte.create(options?)
totte.useRequestInterceptor(callback?)
totte.useResponseInterceptor(callback?)
网络请求的配置项与 fetch
完全相同,并在其基础上追加了下列四个额外属性:
interface RequestConfig {
url: string;
origin?: string;
// 请求载荷
payload?: object | null;
// 默认 'json',可选值:'arraybuffer' | 'blob' | 'json' | 'text' | 'formData'
responseType?: ResponseType;
}
Totte 是日语「取って」的罗马音,其英语正是 Fetch,而且「totte」也和 「tote」非常相似,我便将其用做了该项目的名字。