CapacitorHttp
Capacitor HTTP API 通过修补 fetch 和 XMLHttpRequest 以使用原生库来提供原生 HTTP 支持。它还提供了一些辅助方法,用于在不使用 fetch 和 XMLHttpRequest 的情况下发起原生 HTTP 请求。此插件随 @capacitor/core 一起提供。
配置
默认情况下,修补 window.fetch 和 XMLHttpRequest 以使用原生库的功能是禁用的。
如果您想启用此功能,请在 capacitor.config 文件中修改以下配置。
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
enabled | boolean | 启用修补 fetch 和 XMLHttpRequest 以使用原生库而非 Web 实现。 | false |
配置示例
在 capacitor.config.json 中:
{
"plugins": {
"CapacitorHttp": {
"enabled": true
}
}
}
在 capacitor.config.ts 中:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
plugins: {
CapacitorHttp: {
enabled: true,
},
},
};
export default config;
示例
import { CapacitorHttp } from '@capacitor/core';
// GET 请求示例
const doGet = () => {
const options = {
url: 'https://example.com/my/api',
headers: { 'X-Fake-Header': 'Fake-Value' },
params: { size: 'XL' },
};
const response: HttpResponse = await CapacitorHttp.get(options);
// 或者...
// const response = await CapacitorHttp.request({ ...options, method: 'GET' })
};
// POST 请求示例。注意:data
// 可以作为原始 JS 对象传递(必须是 JSON 可序列化的)
const doPost = () => {
const options = {
url: 'https://example.com/my/api',
headers: { 'X-Fake-Header': 'Fake-Value' },
data: { foo: 'bar' },
};
const response: HttpResponse = await CapacitorHttp.post(options);
// 或者...
// const response = await CapacitorHttp.request({ ...options, method: 'POST' })
};
大文件支持
由于桥接的特性,从原生端解析和传输大量数据到 Web 端可能会导致问题。计划在不久的将来向 @capacitor/filesystem 插件添加对向原生设备下载和上传文件的支持。在此期间,一种可能规避内存耗尽问题的方法(特别是在 Android 上)是编辑 AndroidManifest.xml 并在 application 元素中添加 android:largeHeap="true"。大多数应用不需要这样做,而应该专注于减少整体内存使用以提高性能。启用此功能也不能保证可用内存的固定增加,因为某些设备受其总可用内存的限制。
API
****** HTTP 插件 *******
request(...)
request(options: HttpOptions) => Promise<HttpResponse>
使用原生库向服务器发起 HTTP 请求。
| 参数 | 类型 |
|---|---|
options | |
返回:
Promise<HttpResponse>
get(...)
get(options: HttpOptions) => Promise<HttpResponse>
使用原生库向服务器发起 HTTP GET 请求。
| 参数 | 类型 |
|---|---|
options | |
返回:
Promise<HttpResponse>
post(...)
post(options: HttpOptions) => Promise<HttpResponse>
使用原生库向服务器发起 HTTP POST 请求。
| 参数 | 类型 |
|---|---|
options | |
返回:
Promise<HttpResponse>
put(...)
put(options: HttpOptions) => Promise<HttpResponse>
使用原生库向服务器发起 HTTP PUT 请求。
| 参数 | 类型 |
|---|---|
options | |
返回:
Promise<HttpResponse>
patch(...)
patch(options: HttpOptions) => Promise<HttpResponse>
使用原生库向服务器发起 HTTP PATCH 请求。
| 参数 | 类型 |
|---|---|
options | |
返回:
Promise<HttpResponse>
delete(...)
delete(options: HttpOptions) => Promise<HttpResponse>
使用原生库向服务器发起 HTTP DELETE 请求。
| 参数 | 类型 |
|---|---|
options | |
返回:
Promise<HttpResponse>
接口
HttpResponse
| 属性 | 类型 | 描述 |
|---|---|---|
data | any | 随 HTTP 响应接收的附加数据。 |
status | number | 从 HTTP 响应接收的状态码。 |
headers | | 从 HTTP 响应接收的请求头。 |
url | string | 从 HTTP 响应接收的响应 URL。 |
HttpHeaders
HttpOptions
| 属性 | 类型 | 描述 |
|---|---|---|
url | string | 要发送请求的 URL。 |
method | string | 要执行的 HTTP 请求方法。(默认是 GET) |
params | | 要附加到请求的 URL 参数。 |
data | any | 注意:在 Android 和 iOS 上,data 只能是字符串或 JSON。FormData、Blob、ArrayBuffer 和其他复杂类型仅在 Web 端或通过启用配置中的 CapacitorHttp 并使用修补后的 window.fetch 或 XMLHttpRequest 时直接支持。如果您需要发送复杂类型,应将数据序列化为 base64 并相应地设置 headers["Content-Type"] 和 dataType 属性。 |
headers | | 要随请求一起发送的 HTTP 请求头。 |
readTimeout | number | 等待读取附加数据的超时时间(毫秒)。每次收到新数据时重置。 |
connectTimeout | number | 等待初始连接的超时时间(毫秒)。 |
disableRedirects | boolean | 设置是否禁用自动 HTTP 重定向 |
webFetchExtra | | 在 Web 端运行时用于 fetch 的额外参数 |
responseType | | 用于在返回给请求者之前适当解析响应。如果响应 content-type 是 "json",则忽略此值。 |
shouldEncodeUrlParams | boolean | 使用此选项可以在某些情况下保持 URL 不编码(已经编码、azure/firebase 测试等)。默认值为 true。 |
dataType | 'file' | 'formData' | 如果我们需要将数据从 JS 类型转换过来,用于在原生层进行特殊处理 |
HttpParams
RequestInit
| 属性 | 类型 | 描述 |
|---|---|---|
body | | 一个 BodyInit 对象或 null,用于设置请求的 body。 |
cache | | 指示请求如何与浏览器缓存交互的字符串,用于设置请求的 cache。 |
credentials | | 指示是否总是、从不或仅在发送到同源 URL 时发送凭据的字符串。设置请求的 credentials。 |
headers | | 一个 Headers 对象、对象字面量或双项数组的数组,用于设置请求的 headers。 |
integrity | string | 请求要获取的资源的加密哈希值。设置请求的 integrity。 |
keepalive | boolean | 设置请求 keepalive 的布尔值。 |
method | string | 设置请求 method 的字符串。 |
mode | | 指示请求是否使用 CORS,或仅限于同源 URL 的字符串。设置请求的 mode。 |
redirect | | 指示请求是跟随重定向、遇到重定向时出错还是返回重定向(以不透明方式)的字符串。设置请求的 redirect。 |
referrer | string | 值为同源 URL、"about:client" 或空字符串,用于设置请求的 referrer。 |
referrerPolicy | | 设置请求 referrerPolicy 的 referrer 策略。 |
signal | | 一个用于设置请求 signal 的 AbortSignal。 |
window | any | 只能为 null。用于解除请求与任何 Window 的关联。 |
Blob
一种类似文件的不可变原始数据对象。Blob 表示不一定是 JavaScript 原生格式的数据。File 接口基于 Blob,继承 blob 功能并扩展以支持用户系统上的文件。
Blob 类是 require('node:buffer').Blob 的全局引用。
https://nodejs.org/api/buffer.html#class-blob
| 属性 | 类型 |
|---|---|
size | number |
type | string |
| 方法 | 签名 |
|---|---|
| arrayBuffer | () => Promise<ArrayBuffer> |
| slice | (start?: number, end?: number, contentType?: string) => Blob |
| stream | () => ReadableStream |
| text | () => Promise<string> |
ArrayBuffer
表示二进制数据的原始缓冲区,用于存储不同类型化数组的数据。ArrayBuffer 不能直接读取或写入, 但可以传递给类型化数组或 DataView 对象以根据需要解释原始缓冲区。
| 属性 | 类型 | 描述 |
|---|---|---|
byteLength | number | 只读。ArrayBuffer 的长度(以字节为单位)。 |
| 方法 | 签名 | 描述 |
|---|---|---|
| slice | (begin: number, end?: number) => ArrayBuffer | 返回 ArrayBuffer 的一个片段。 |
ReadableStream
此 Streams API 接口表示可读的字节数据流。Fetch API 通过 Response 对象的 body 属性提供了 ReadableStream 的具体实例。
| 属性 | 类型 |
|---|---|
locked | boolean |
| 方法 | 签名 |
|---|---|
| cancel | (reason?: any) => Promise<void> |
| getReader | () => ReadableStreamDefaultReader<R> |
| pipeThrough | <T>(transform: ReadableWritablePair<T, R>, options?: StreamPipeOptions) => ReadableStream<T> |
| pipeTo | (dest: WritableStream<R>, options?: StreamPipeOptions) => Promise<void> |
| tee | () => [ReadableStream<R>, ReadableStream<R>] |
ReadableStreamDefaultReader
| 方法 | 签名 |
|---|---|
| read | () => Promise<ReadableStreamDefaultReadResult<R>> |
| releaseLock | () => void |
ReadableStreamDefaultReadValueResult
| 属性 | 类型 |
|---|---|
done | false |
value | T |