CapacitorHttp
Capacitor Http API 通过修补 fetch
和 XMLHttpRequest
来使用原生库,提供原生 HTTP 支持。它还提供了无需使用 fetch
和 XMLHttpRequest
的原生 HTTP 请求辅助方法。此插件与 @capacitor/core
捆绑提供。
配置
默认情况下,修补 window.fetch
和 XMLHttpRequest
以使用原生库的功能是禁用的。
如果您希望启用此功能,请在 capacitor.config
文件中修改以下配置。
属性 | 类型 | 描述 | 默认值 |
---|---|---|---|
enabled | boolean | 启用修补 fetch 和 XMLHttpRequest 以使用原生库。 | 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 请求示例。注意:数据可以作为原始 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>
Interfaces
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 上,数据只能是字符串或 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 |
| 用于在将响应返回给请求者之前适当解析响应。如果响应内容类型为 "json",则忽略此值。 |
shouldEncodeUrlParams | boolean | 如果您需要在某些情况下保持 URL 未编码(已编码、azure/firebase 测试等),请使用此选项。默认值为 true。 |
dataType | 'file' | 'formData' | 如果我们必须从需要在本机层特殊处理的 JS 类型转换数据,则使用此选项 |
HttpParams
RequestInit
属性 | 类型 | 描述 |
---|---|---|
body |
| 一个 BodyInit 对象或 null 以设置请求的正文。 |
cache |
| 一个字符串,指示请求如何与浏览器的缓存交互以设置请求的缓存。 |
credentials |
| 一个字符串,指示是否总是、从不或仅在发送到同源 URL 时发送凭据。设置请求的凭据。 |
headers |
| 一个 Headers 对象、对象字面量或二元数组的数组以设置请求的标头。 |
integrity | string | 要由请求获取的资源的加密哈希。设置请求的完整性。 |
keepalive | boolean | 一个布尔值以设置请求的 keepalive。 |
method | string | 一个字符串以设置请求的方法。 |
mode |
| 一个字符串,指示请求是否使用 CORS,或是否限制为同源 URL。设置请求的模式。 |
redirect |
| 一个字符串,指示请求是否遵循重定向、在遇到重定向时出错或返回重定向(以不透明的方式)。设置请求的重定向。 |
referrer | string | 一个字符串,其值是同源 URL、"about:client" 或空字符串,以设置请求的引用者。 |
referrerPolicy |
| 一个引用者策略以设置请求的 referrerPolicy。 |
signal |
| 一个 AbortSignal 以设置请求的信号。 |
window | any | 只能为 null。用于将请求与任何窗口分离。 |
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
表示二进制数据的原始缓冲区,用于存储不同类型数组的数据。ArrayBuffers 不能直接读取或写入,但可以传递给类型化数组或 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 |
ReadableStreamDefaultReadDoneResult
属性 | 类型 |
---|---|
done | true |
value |