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>
接口
HttpResponse
| 属性 | 类型 | 描述 |
|---|---|---|
data | any | 随 HTTP 响应接收到的额外数据。 |
status | number | 从 HTTP 响应接收到的状态码。 |
headers | | 从 HTTP 响应接收到的头部信息。 |
url | string | 从 HTTP 响应接收到的响应 URL。 |
HttpHeaders#### HttpOptions| 属性 | 类型 | 说明 |
| ------------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| url | string | 要发送请求的 URL。 |
| method | string | 要使用的 HTTP 请求方法。(默认为 GET) |
| params |
HttpParams | 要附加到请求的 URL 参数。 |
| data | any | 注意:在 Android 和 iOS 上,data 只能是字符串或 JSON。FormData、Blob、ArrayBuffer 以及其他复杂类型仅在 Web 端直接支持,或者通过配置启用 CapacitorHttp 并使用修补后的 window.fetch 或 XMLHttpRequest 支持。如果需要发送复杂类型,应将数据序列化为 base64,并相应设置 headers["Content-Type"] 和 dataType 属性。 |
| headers | HttpHeaders | 随请求发送的 HTTP 请求头。 |
| readTimeout | number | 等待读取额外数据的时长(以毫秒计)。每次接收到新数据时重置。 |
| connectTimeout | number | 等待初始连接的时长(以毫秒计)。 |
| disableRedirects | boolean | 设置是否应禁用自动 HTTP 重定向。 |
| webFetchExtra | RequestInit | 在 Web 端运行时为 fetch 提供的额外参数。 |
| responseType | HttpResponseType | 用于在将响应返回给请求者之前对其进行适当解析。如果响应内容类型是 "json",则忽略此值。 |
| shouldEncodeUrlParams | boolean | 如果需要在某些情况下(例如 URL 已编码、Azure/Firebase 测试等)保持 URL 不编码,请使用此选项。默认值为 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。用于将请求与任何 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 对象,以便按需解释原始缓冲区。