mphttpx 2.3.1 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +110 -994
  2. package/package.json +1 -1
  3. package/README.zh-CN.md +0 -983
package/README.zh-CN.md DELETED
@@ -1,983 +0,0 @@
1
- # MPHTTPX 中文文档
2
-
3
- `mphttpx`旨在为小程序提供与浏览器一致的请求开发体验,通过引入此库即可在小程序中使用XMLHttpRequest、fetch和FormData等浏览器请求相关功能。
4
-
5
- ## 目录
6
-
7
- - [MPHTTPX 中文文档](#mphttpx-中文文档)
8
- - [目录](#目录)
9
- - [功能](#功能)
10
- - [安装](#安装)
11
- - [小程序支持情况](#小程序支持情况)
12
- - [使用](#使用)
13
- - [TextEncoder](#textencoder)
14
- - [示例](#示例)
15
- - [兼容性](#兼容性)
16
- - [TextDecoder](#textdecoder)
17
- - [示例](#示例-1)
18
- - [兼容性](#兼容性-1)
19
- - [Blob](#blob)
20
- - [示例](#示例-2)
21
- - [兼容性](#兼容性-2)
22
- - [File](#file)
23
- - [示例](#示例-3)
24
- - [兼容性](#兼容性-3)
25
- - [FileReader](#filereader)
26
- - [示例](#示例-4)
27
- - [兼容性](#兼容性-4)
28
- - [URLSearchParams](#urlsearchparams)
29
- - [示例](#示例-5)
30
- - [兼容性](#兼容性-5)
31
- - [FormData](#formdata)
32
- - [示例](#示例-6)
33
- - [兼容性](#兼容性-6)
34
- - [fetch](#fetch)
35
- - [示例](#示例-7)
36
- - [兼容性](#兼容性-7)
37
- - [Request](#request)
38
- - [示例](#示例-8)
39
- - [兼容性](#兼容性-8)
40
- - [Response](#response)
41
- - [示例](#示例-9)
42
- - [兼容性](#兼容性-9)
43
- - [Headers](#headers)
44
- - [示例](#示例-10)
45
- - [兼容性](#兼容性-10)
46
- - [AbortController](#abortcontroller)
47
- - [示例](#示例-11)
48
- - [兼容性](#兼容性-11)
49
- - [EventTarget](#eventtarget)
50
- - [示例](#示例-12)
51
- - [兼容性](#兼容性-12)
52
- - [XMLHttpRequest (小程序)](#xmlhttprequest-小程序)
53
- - [示例](#示例-13)
54
- - [兼容性](#兼容性-13)
55
- - [WebSocket (小程序, 从1.1.0之后)](#websocket-小程序-从110之后)
56
- - [示例](#示例-14)
57
- - [兼容性](#兼容性-14)
58
- - [自动导入](#自动导入)
59
- - [UniApp \& Taro](#uniapp--taro)
60
- - [Node.js](#nodejs)
61
- - [开源协议](#开源协议)
62
-
63
- ## 功能
64
-
65
- - **TextEncoder**
66
- - **TextDecoder**
67
- - **Blob**
68
- - **File**
69
- - **FileReader**
70
- - **URLSearchParams**
71
- - **FormData**
72
- - **fetch**
73
- - **Headers**
74
- - **Request**
75
- - **Response**
76
- - **AbortController**
77
- - **EventTarget**
78
- - **XMLHttpRequest (小程序)**
79
- - **WebSocket (小程序, 从1.1.0之后)**
80
- - **支持 tree-shaking (从2.0.0之后)**
81
-
82
- ## 安装
83
-
84
- ```
85
- npm install mphttpx
86
- ```
87
-
88
- ## 小程序支持情况
89
-
90
- | 微信 | 支付宝 | 百度 | 抖音 | QQ | 快手 | 京东 | 小红书 |
91
- |:---:|:------:|:----:|:---:|:--:|:----:|:---:|:------:|
92
- | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
93
-
94
- 注意:在现代浏览器中,并不需要这些填充功能,在浏览器中从mphttpx导入的函数会直接返回浏览器本地的函数。
95
-
96
- ## 使用
97
-
98
- 注意:mphttpx中所有的模块都有一个与之对应的以字母P结尾的版本,两者的区别在于以字母P结尾的版本是polyfill的。
99
-
100
- 举个例子:
101
-
102
- ```javascript
103
- // mphttpx不对globalThis做任何修改
104
- import { TextEncoder } from "mphttpx"; // 优先返回全局对象,如果不存在则返回polyfill实现
105
- import { TextEncoderP } from "mphttpx"; // 直接返回polyfill实现
106
- ```
107
-
108
- ### TextEncoder
109
-
110
- #### 示例
111
-
112
- ```javascript
113
- import { TextEncoder } from "mphttpx";
114
-
115
- const encoder = new TextEncoder();
116
- const encoded = encoder.encode("€");
117
-
118
- console.log(encoded); // Uint8Array(3) [226, 130, 172]
119
- ```
120
-
121
- #### 兼容性
122
-
123
- 属性
124
-
125
- | 属性 | 可用性 | 描述 |
126
- | --------- | --------- | -------------|
127
- | encoding | ✔ | utf-8 |
128
-
129
- 方法
130
-
131
- | 方法 | 可用性 | 描述 |
132
- | ------- | --------- | -------------|
133
- | encode(string) | ✔ |
134
- | encodeInto(string, uint8Array) | ✔ |
135
-
136
- ### TextDecoder
137
-
138
- #### 示例
139
-
140
- ```javascript
141
- import { TextDecoder } from "mphttpx";
142
-
143
- const utf8decoder = new TextDecoder(); // 默认 'utf-8'
144
- const encodedText = new Uint8Array([240, 160, 174, 183]);
145
-
146
- console.log(utf8decoder.decode(encodedText)); // 𠮷
147
- ```
148
-
149
- #### 兼容性
150
-
151
- 属性
152
-
153
- | 属性 | 可用性 | 描述 |
154
- | --------- | --------- | -------------|
155
- | encoding | ✔ | 仅utf-8 |
156
- | fatal | ✔ |
157
- | ignoreBOM | ✔ |
158
-
159
- 方法
160
-
161
- | 方法 | 可用性 | 描述 |
162
- | ------- | --------- | -------------|
163
- | decode() | ✔ |
164
- | decode(buffer) | ✔ |
165
- | decode(buffer, options) | ✔ |
166
-
167
- ### Blob
168
-
169
- #### 示例
170
-
171
- 创建blob
172
-
173
- ```javascript
174
- import { Blob, fetch } from "mphttpx";
175
-
176
- const obj = { hello: "world" };
177
- const blob = new Blob([JSON.stringify(obj, null, 2)], {
178
- type: "application/json",
179
- });
180
-
181
- const another_blob = new Blob(["Hello, World!"], {
182
- type: "text/plain"
183
- });
184
-
185
- fetch("https://www.test.com/blob", {
186
- method: "POST",
187
- body: another_blob,
188
- });
189
- ```
190
-
191
- 从blob提取数据
192
-
193
- ```javascript
194
- import { Blob, FileReader, fetch } from "mphttpx";
195
-
196
- const blob = new Blob([JSON.stringify({ foo: "bar" })], {
197
- type: "application/json",
198
- });
199
-
200
- const reader = new FileReader();
201
- reader.addEventListener("loadend", () => {
202
- // reader.result中包含了ArrayBuffer数据格式的内容
203
- });
204
- reader.readAsArrayBuffer(blob);
205
-
206
- fetch("https://www.test.com/blob", {
207
- method: "POST",
208
- body: blob,
209
- })
210
- .then(r => r.blob())
211
- .then(r => {
212
- const reader2 = new FileReader();
213
- reader2.onload = () => {
214
- // reader2.result
215
- }
216
- reader2.readAsDataURL(r); // base64
217
- });
218
- ```
219
-
220
- #### 兼容性
221
-
222
- 属性
223
-
224
- | 属性 | 可用性 | 描述 |
225
- | --------- | --------- | -------------|
226
- | size | ✔ |
227
- | type | ✔ |
228
-
229
- 方法
230
-
231
- | 方法 | 可用性 | 描述 |
232
- | ------- | --------- | -------------|
233
- | arrayBuffer() | ✔ |
234
- | bytes() | ✔ |
235
- | slice() | ✔ |
236
- | slice(start) | ✔ |
237
- | slice(start, end) | ✔ |
238
- | slice(start, end, contentType) | ✔ |
239
- | stream() | ✖ |
240
- | text() | ✔ |
241
-
242
- ### File
243
-
244
- #### 示例
245
-
246
- ```javascript
247
- import { File } from "mphttpx";
248
-
249
- const file = new File(["foo"], "foo.txt", {
250
- type: "text/plain",
251
- });
252
- ```
253
-
254
- #### 兼容性
255
-
256
- 属性
257
-
258
- | 属性 | 可用性 | 描述 |
259
- | --------- | --------- | -------------|
260
- | lastModified | ✔ |
261
- | name | ✔ |
262
- | webkitRelativePath | ✖ |
263
-
264
- ### FileReader
265
-
266
- #### 示例
267
-
268
- ```javascript
269
- import { File, FileReader } from "mphttpx";
270
-
271
- const file = new File([JSON.stringify({ foo: "bar" })], "test.json", {
272
- type: "application/json",
273
- });
274
-
275
- // 读取file
276
- const reader = new FileReader();
277
- reader.onload = () => {
278
- console.log(reader.result);
279
- };
280
- reader.readAsText(file);
281
- ```
282
-
283
- #### 兼容性
284
-
285
- 属性
286
-
287
- | 属性 | 可用性 | 描述 |
288
- | --------- | --------- | -------------|
289
- | error | ✔ |
290
- | readyState | ✔ |
291
- | result | ✔ |
292
-
293
- 方法
294
-
295
- | 方法 | 可用性 | 描述 |
296
- | ------- | --------- | -------------|
297
- | abort() | ✔ | 模拟实现 |
298
- | readAsArrayBuffer() | ✔ |
299
- | readAsBinaryString() | ✔ |
300
- | readAsDataURL() | ✔ |
301
- | readAsText() | ✔ | 仅utf-8 |
302
-
303
- ### URLSearchParams
304
-
305
- #### 示例
306
-
307
- ```javascript
308
- import { URLSearchParams, fetch } from "mphttpx";
309
-
310
- const paramsString = "q=URLUtils.searchParams&topic=api";
311
- const searchParams = new URLSearchParams(paramsString);
312
-
313
- // 迭代搜索参数
314
- for (const p of searchParams) {
315
- console.log(p);
316
- }
317
-
318
- console.log(searchParams.has("topic")); // true
319
- console.log(searchParams.has("topic", "fish")); // false
320
- console.log(searchParams.get("topic") === "api"); // true
321
- console.log(searchParams.getAll("topic")); // ["api"]
322
- console.log(searchParams.get("foo") === null); // true
323
- console.log(searchParams.append("topic", "webdev"));
324
- console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=api&topic=webdev"
325
- console.log(searchParams.set("topic", "More webdev"));
326
- console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=More+webdev"
327
- console.log(searchParams.delete("topic"));
328
- console.log(searchParams.toString()); // "q=URLUtils.searchParams"
329
-
330
- // GET
331
- fetch("https://www.test.com/get" + `?${searchParams.toString()}`);
332
-
333
- // POST
334
- fetch("https://www.test.com/post", {
335
- method: "POST",
336
- body: searchParams,
337
- });
338
- ```
339
-
340
- 搜索参数也可以通过对象构造
341
-
342
- ```javascript
343
- import { URLSearchParams } from "mphttpx";
344
-
345
- const paramsObj = { foo: "bar", baz: "bar" };
346
- const searchParams = new URLSearchParams(paramsObj);
347
-
348
- console.log(searchParams.toString()); // "foo=bar&baz=bar"
349
- console.log(searchParams.has("foo")); // true
350
- console.log(searchParams.get("foo")); // "bar"
351
- ```
352
-
353
- #### 兼容性
354
-
355
- 属性
356
-
357
- | 属性 | 可用性 | 描述 |
358
- | --------- | --------- | -------------|
359
- | size | ✔ |
360
-
361
- 方法
362
-
363
- | 方法 | 可用性 | 描述 |
364
- | ------- | --------- | -------------|
365
- | append(name, value) | ✔ |
366
- | delete(name) | ✔ |
367
- | delete(name, value) | ✔ |
368
- | entries() | ✔ |
369
- | forEach(callback) | ✔ |
370
- | forEach(callback, thisArg) | ✔ |
371
- | get(name) | ✔ |
372
- | getAll(name) | ✔ |
373
- | has(name) | ✔ |
374
- | has(name, value) | ✔ |
375
- | keys() | ✔ |
376
- | set(name, value) | ✔ |
377
- | sort() | ✔ |
378
- | toString() | ✔ |
379
- | values() | ✔ |
380
-
381
- ### FormData
382
-
383
- #### 示例
384
-
385
- ```javascript
386
- import { FormData, fetch } from "mphttpx";
387
-
388
- const formData = new FormData();
389
- formData.append("username", "Chris");
390
-
391
- const file = new File(["Hello, World!"], "file.txt", {
392
- type: "text/plain",
393
- });
394
- formData.append("file", file);
395
-
396
- fetch("https://www.test.com/formdata", {
397
- method: "POST",
398
- body: formData,
399
- });
400
- ```
401
-
402
- #### 兼容性
403
-
404
- 构造函数
405
-
406
- | 构造函数 | 可用性 | 描述 |
407
- | ----------- | --------- | -------------|
408
- | new FormData() | ✔ |
409
- | new FormData(form) | ✖ |
410
- | new FormData(form, submitter) | ✖ |
411
-
412
- 方法
413
-
414
- | 方法 | 可用性 | 描述 |
415
- | ------- | --------- | -------------|
416
- | append(name, value) | ✔ |
417
- | append(name, value, filename) | ✔ |
418
- | delete(name) | ✔ |
419
- | entries() | ✔ |
420
- | get(name) | ✔ |
421
- | getAll(name) | ✔ |
422
- | has(name) | ✔ |
423
- | keys() | ✔ |
424
- | set(name, value) | ✔ |
425
- | set(name, value, filename) | ✔ |
426
- | values() | ✔ |
427
-
428
- ### fetch
429
-
430
- #### 示例
431
-
432
- ```javascript
433
- import { fetch } from "mphttpx";
434
-
435
- fetch("http://example.com/movies.json")
436
- .then((response) => response.json())
437
- .then((data) => console.log(data));
438
- ```
439
-
440
- 通过fetch发送JSON数据
441
-
442
- ```javascript
443
- import { fetch } from "mphttpx";
444
-
445
- const data = { username: "example" };
446
-
447
- fetch("https://example.com/profile", {
448
- method: "POST", // 或 'PUT'
449
- headers: {
450
- "Content-Type": "application/json",
451
- },
452
- body: JSON.stringify(data),
453
- })
454
- .then((response) => response.json())
455
- .then((data) => {
456
- console.log("Success:", data);
457
- })
458
- .catch((error) => {
459
- console.error("Error:", error);
460
- });
461
- ```
462
-
463
- 上传文件
464
-
465
- ```javascript
466
- import { fetch, File, FormData } from "mphttpx";
467
-
468
- const formData = new FormData();
469
-
470
- formData.append("username", "abc123");
471
- formData.append("file", new File(["foo"], "foo.txt", { type: "text/plain" }));
472
-
473
- fetch("https://example.com/profile/avatar", {
474
- method: "PUT",
475
- body: formData,
476
- })
477
- .then((response) => response.json())
478
- .then((result) => {
479
- console.log("Success:", result);
480
- })
481
- .catch((error) => {
482
- console.error("Error:", error);
483
- });
484
- ```
485
-
486
- 注意:fetch基于下层XMLHttpRequest实现,且这个下层实现是可以替换的。
487
-
488
- ```javascript
489
- import { setXMLHttpRequest } from "mphttpx";
490
- setXMLHttpRequest(another_XMLHttpRequest); // 自定义XMLHttpRequest实现
491
- ```
492
-
493
- | 方法 | 可用性 | 描述 |
494
- | ------- | --------- | -------------|
495
- | fetch(resource) | ✔ |
496
- | fetch(resource, options) | ✔ |
497
-
498
- #### 兼容性
499
-
500
- 参考下方Request
501
-
502
- ### Request
503
-
504
- #### 示例
505
-
506
- ```javascript
507
- import { fetch, Request } from "mphttpx";
508
-
509
- const request = new Request("https://www.mozilla.org/favicon.ico");
510
-
511
- const url = request.url;
512
- const method = request.method;
513
- const credentials = request.credentials;
514
-
515
- fetch(request)
516
- .then((response) => response.blob())
517
- .then((blob) => {
518
- console.log(blob);
519
- });
520
- ```
521
-
522
- ```javascript
523
- import { fetch, Request } from "mphttpx";
524
-
525
- const request = new Request("https://example.com", {
526
- method: "POST",
527
- body: '{"foo": "bar"}',
528
- });
529
-
530
- const url = request.url;
531
- const method = request.method;
532
- const credentials = request.credentials;
533
- const bodyUsed = request.bodyUsed;
534
-
535
- fetch(request)
536
- .then((response) => {
537
- if (response.status === 200) {
538
- return response.json();
539
- } else {
540
- throw new Error("Something went wrong on API server!");
541
- }
542
- })
543
- .then((response) => {
544
- console.debug(response);
545
- // …
546
- })
547
- .catch((error) => {
548
- console.error(error);
549
- });
550
- ```
551
-
552
- #### 兼容性
553
-
554
- 属性
555
-
556
- | 属性 | 可用性 | 描述 |
557
- | --------- | --------- | -------------|
558
- | body | ✖ |
559
- | bodyUsed | ✔ |
560
- | cache | ✔ |
561
- | credentials | ✔ |
562
- | destination | ✖ |
563
- | headers | ✔ |
564
- | integrity | ✖ |
565
- | keepalive | ✖ |
566
- | method | ✔ |
567
- | mode | ✖ |
568
- | redirect | ✖ |
569
- | referrer | ✖ |
570
- | referrerPolicy | ✖ |
571
- | signal | ✔ |
572
- | url | ✔ |
573
-
574
- 方法
575
-
576
- | 方法 | 可用性 | 描述 |
577
- | ------- | --------- | -------------|
578
- | arrayBuffer() | ✔ |
579
- | blob() | ✔ |
580
- | bytes() | ✔ |
581
- | clone() | ✔ |
582
- | formData() | ✔ |
583
- | json() | ✔ |
584
- | text() | ✔ |
585
-
586
- ### Response
587
-
588
- #### 示例
589
-
590
- ```javascript
591
- import { Response, Blob, fetch } from "mphttpx";
592
-
593
- const myBlob = new Blob();
594
- const myOptions = { status: 200, statusText: "SuperSmashingGreat!" };
595
- const myResponse = new Response(myBlob, myOptions);
596
- ```
597
-
598
- #### 兼容性
599
-
600
- 属性
601
-
602
- | 属性 | 可用性 | 描述 |
603
- | --------- | --------- | -------------|
604
- | body | ✖ |
605
- | bodyUsed | ✔ |
606
- | headers | ✔ |
607
- | ok | ✔ |
608
- | redirected | ✖ |
609
- | status | ✔ |
610
- | statusText | ✔ |
611
- | type | ✖ |
612
- | url | ✔ |
613
-
614
- 方法
615
-
616
- | 方法 | 可用性 | 描述 |
617
- | ------- | --------- | -------------|
618
- | arrayBuffer() | ✔ |
619
- | blob() | ✔ |
620
- | bytes() | ✔ |
621
- | clone() | ✔ |
622
- | formData() | ✔ |
623
- | json() | ✔ |
624
- | text() | ✔ |
625
-
626
- ### Headers
627
-
628
- #### 示例
629
-
630
- ```javascript
631
- import { Headers, fetch } from "mphttpx";
632
-
633
- const myHeaders = new Headers();
634
-
635
- myHeaders.append("Content-Type", "text/plain");
636
- myHeaders.get("Content-Type"); // 应当返回'text/plain'
637
-
638
- fetch("https://www.test.com/headers", {
639
- headers: myHeaders,
640
- });
641
- ```
642
-
643
- 通过传递数组的数组或普通对象也可进行构造:
644
-
645
- ```javascript
646
- import { Headers } from "mphttpx";
647
-
648
- let myHeaders = new Headers({
649
- "Content-Type": "text/plain",
650
- });
651
-
652
- // 或:使用数组的数组:
653
- myHeaders = new Headers([["Content-Type", "text/plain"]]);
654
-
655
- myHeaders.get("Content-Type"); // 应当返回'text/plain'
656
- ```
657
-
658
- #### 兼容性
659
-
660
- 方法
661
-
662
- | 方法 | 可用性 | 描述 |
663
- | ------- | --------- | -------------|
664
- | append(name, value) | ✔ |
665
- | delete(name) | ✔ |
666
- | entries() | ✔ |
667
- | forEach(callbackFn) | ✔ |
668
- | forEach(callbackFn, thisArg) | ✔ |
669
- | get(name) | ✔ |
670
- | getSetCookie() | ✔ |
671
- | has(name) | ✔ |
672
- | keys() | ✔ |
673
- | set(name, value) | ✔ |
674
- | values() | ✔ |
675
-
676
- ### AbortController
677
-
678
- #### 示例
679
-
680
- ```javascript
681
- import { AbortController, fetch } from "mphttpx";
682
-
683
- const controller = new AbortController();
684
-
685
- fetch("https://www.test.com/abort", {
686
- signal: controller.signal,
687
- });
688
- ```
689
-
690
- ```javascript
691
- import { AbortController, AbortSignal, Request, fetch } from "mphttpx";
692
-
693
- async function get() {
694
- const controller = new AbortController();
695
- const request = new Request("https://example.org/get", {
696
- signal: controller.signal,
697
- });
698
-
699
- const response = await fetch(request);
700
- controller.abort();
701
- // 下一行将会抛出`AbortError`异常
702
- const text = await response.text();
703
- console.log(text);
704
- }
705
- ```
706
-
707
- #### 兼容性
708
-
709
- AbortController属性
710
-
711
- | 属性 | 可用性 | 描述 |
712
- | --------- | --------- | -------------|
713
- | signal | ✔ |
714
-
715
- AbortController方法
716
-
717
- | 方法 | 可用性 | 描述 |
718
- | ------- | --------- | -------------|
719
- | abort() | ✔ |
720
- | abort(reason) | ✔ |
721
-
722
- AbortSignal属性
723
-
724
- | 属性 | 可用性 | 描述 |
725
- | --------- | --------- | -------------|
726
- | aborted | ✔ |
727
- | reason | ✔ |
728
-
729
- AbortSignal方法
730
-
731
- | 方法 | 可用性 | 描述 |
732
- | ------- | --------- | -------------|
733
- | throwIfAborted() | ✔ |
734
-
735
- ### EventTarget
736
-
737
- #### 示例
738
-
739
- ```javascript
740
- import { EventTarget, Event, CustomEvent } from "mphttpx";
741
-
742
- const target = new EventTarget();
743
-
744
- target.addEventListener("foo", function (evt) {
745
- console.log(evt);
746
- });
747
-
748
- const evt = new Event("foo");
749
- target.dispatchEvent(evt);
750
-
751
- target.addEventListener("animalfound", function (evt) {
752
- console.log(evt.detail.name);
753
- });
754
-
755
- const catFound = new CustomEvent("animalfound", {
756
- detail: {
757
- name: "cat",
758
- },
759
- });
760
- target.dispatchEvent(catFound);
761
- ```
762
-
763
- #### 兼容性
764
-
765
- 方法
766
-
767
- | 方法 | 可用性 | 描述 |
768
- | ------- | --------- | -------------|
769
- | addEventListener(type, listener) | ✔ |
770
- | addEventListener(type, listener, options) | ✔ |
771
- | addEventListener(type, listener, useCapture) | ✔ |
772
- | dispatchEvent(event) | ✔ |
773
- | removeEventListener(type, listener) | ✔ |
774
- | removeEventListener(type, listener, options) | ✔ |
775
- | removeEventListener(type, listener, useCapture) | ✔ |
776
-
777
- ### XMLHttpRequest (小程序)
778
-
779
- #### 示例
780
-
781
- GET
782
-
783
- ```javascript
784
- import { XMLHttpRequest } from "mphttpx";
785
-
786
- const xhr = new XMLHttpRequest();
787
- xhr.open("GET", "https://example.com/server?foo=bar&lorem=ipsum");
788
-
789
- xhr.onload = () => {
790
- // 请求完成。在此处理业务。
791
- };
792
-
793
- xhr.send();
794
- ```
795
-
796
- POST
797
-
798
- ```javascript
799
- import { XMLHttpRequest } from "mphttpx";
800
-
801
- const xhr = new XMLHttpRequest();
802
- xhr.open("POST", "https://example.com/server");
803
-
804
- // 在请求时携带合适的头信息
805
- xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
806
-
807
- xhr.onreadystatechange = () => {
808
- // 当状态变化时调用函数
809
- if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
810
- // 请求完成。在此处理业务。
811
- }
812
- };
813
-
814
- xhr.send(JSON.stringify({ foo: "bar", lorem: "ipsum" }));
815
- ```
816
-
817
- #### 兼容性
818
-
819
- 属性
820
-
821
- | 属性 | 可用性 | 描述 |
822
- | --------- | --------- | -------------|
823
- | readyState | ✔ | 2, 3: 模拟实现 |
824
- | response | ✔ |
825
- | responseText | ✔ |
826
- | responseType | ✔ | 不支持`"document"` |
827
- | responseURL | ✔ | `responseURL`将原样返回请求中的URL地址 |
828
- | responseXML | ✖ |
829
- | status | ✔ |
830
- | statusText | ✔ |
831
- | timeout | ✔ | 该值必须小于小程序的默认超时时间 |
832
- | upload | ✔ | 模拟实现 |
833
- | withCredentials | ✖ |
834
-
835
- 方法
836
-
837
- | 方法 | 可用性 | 描述 |
838
- | ------- | --------- | -------------|
839
- | abort() | ✔ |
840
- | getAllResponseHeaders() | ✔ |
841
- | getResponseHeader(headerName) | ✔ |
842
- | open(method, url) | ✔ |
843
- | open(method, url, async) | ✔ |
844
- | open(method, url, async, user) | ✔ |
845
- | open(method, url, async, user, password) | ✔ |
846
- | overrideMimeType(mimeType) | ✖ |
847
- | send() | ✔ |
848
- | send(body) | ✔ |
849
- | setRequestHeader(header, value) | ✔ |
850
-
851
- ### WebSocket (小程序, 从1.1.0之后)
852
-
853
- #### 示例
854
-
855
- ```javascript
856
- import { WebSocket } from "mphttpx";
857
-
858
- // 创建WebSocket连接
859
- const socket = new WebSocket("wss://example.com:8080");
860
-
861
- // 将二进制类型从"blob"改为"arraybuffer"
862
- socket.binaryType = "arraybuffer";
863
-
864
- // 监听消息
865
- socket.addEventListener("message", (event) => {
866
- if (event.data instanceof ArrayBuffer) {
867
- // 二进制帧
868
- const view = new DataView(event.data);
869
- console.log(view.getInt32(0));
870
- } else {
871
- // 文本帧
872
- console.log(event.data);
873
- }
874
- });
875
- ```
876
-
877
- #### 兼容性
878
-
879
- 属性
880
-
881
- | 属性 | 可用性 | 描述 |
882
- | --------- | --------- | -------------|
883
- | binaryType | ✔ |
884
- | bufferedAmount | ✖ |
885
- | extensions | ✖ |
886
- | protocol | ✔ |
887
- | readyState | ✔ |
888
- | url | ✔ |
889
-
890
- 方法
891
-
892
- | 方法 | 可用性 | 描述 |
893
- | ------- | --------- | -------------|
894
- | close() | ✔ |
895
- | close(code) | ✔ |
896
- | close(code, reason) | ✔ |
897
- | send(data) | ✔ |
898
-
899
- ## 自动导入
900
-
901
- 查看[unplugin-auto-import][2]获取更多信息。
902
-
903
- ```javascript
904
- // 仅参考
905
- AutoImport({
906
- // 其他配置
907
-
908
- imports: [
909
- // 其他导入
910
-
911
- {
912
- "mphttpx": [
913
- "TextEncoder",
914
- "TextDecoder",
915
-
916
- "Blob",
917
- "File",
918
- "FileReader",
919
-
920
- "URLSearchParams",
921
- "FormData",
922
-
923
- "fetch",
924
- "Headers",
925
- "Request",
926
- "Response",
927
-
928
- "AbortController",
929
- "AbortSignal",
930
-
931
- "EventTarget",
932
- "Event",
933
- "CustomEvent",
934
-
935
- "XMLHttpRequest", // 小程序
936
- "WebSocket", // 小程序
937
- ],
938
- },
939
-
940
- // 其他导入
941
- ],
942
-
943
- // 其他配置
944
- });
945
- ```
946
-
947
- 注意(UniApp开发者):如果你的项目是通过HBuilderX以老式Vue2为模板创建的,尝试安装老版本的unplugin-auto-import以支持CMD模块,比如0.16.7版本。
948
-
949
- ## UniApp & Taro
950
-
951
- ```javascript
952
- import { setRequest } from "mphttpx";
953
- import { setConnectSocket } from "mphttpx";
954
-
955
- setRequest(uni.request);
956
- // setRequest(Taro.request);
957
-
958
- setConnectSocket(uni.connectSocket);
959
- // setConnectSocket(Taro.connectSocket);
960
- ```
961
-
962
- 注意:使用UniApp或Taro时,如果`fetch`, `XMLHttpRequest`或`WebSocket`无法正常工作,尝试显式设置request/connectSocket函数。
963
-
964
- ## Node.js
965
-
966
- ```bash
967
- npm install xhr2
968
- ```
969
-
970
- ```javascript
971
- import XMLHttpRequest from "xhr2";
972
- import { setXMLHttpRequest } from "mphttpx";
973
-
974
- setXMLHttpRequest(XMLHttpRequest);
975
- ```
976
-
977
- ## 开源协议
978
-
979
- MIT
980
-
981
- [0]: https://github.com/eligrey/Blob.js
982
- [1]: https://github.com/github/fetch
983
- [2]: https://www.npmjs.com/package/unplugin-auto-import