Skip to content

Commit 58f0b16

Browse files
JOU-amjsJOU-amjs
committed
Merge branch 'feature/[email protected]'
2 parents ba94bd9 + bd27e3a commit 58f0b16

File tree

4 files changed

+91
-89
lines changed

4 files changed

+91
-89
lines changed

‎docs/tutorial/03-client/01-strategy/14-use-sse.md‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ In [3.3.0+], this strategy is implemented using fetch, which means you can speci
2626
```javascript
2727
import { useSSE } from 'alova/client';
2828

29-
const method = (value: string) => alova.Get('/api/source', { param: { key: value } });
29+
const postMethodHandler = (value: string) => alova.Post('/api/source', null, {
30+
headers: { 'Content-Type': 'application/json' },
31+
param: { key: value }
32+
});
3033
const {
3134
// Received data, each reception will modify data
3235
data,
@@ -54,14 +57,10 @@ const {
5457

5558
// Close connection
5659
close
57-
} = useSSE(method, {
58-
method: 'POST',
59-
headers: { 'Content-Type': 'application/json' },
60-
// ...other parameters of fetch
61-
62-
// Compatible with versions before 3.3.0, when this parameter is set to true, the credentials of fetch will be set to 'include'
63-
withCredentials: true,
60+
} = useSSE(postMethodHandler, {
61+
credentials: 'include',
6462
initialData: 'initial-data' // Data in data at the beginning
63+
// ...other parameters of fetch
6564
});
6665
```
6766

@@ -70,17 +69,21 @@ const {
7069
By default, no request will be sent. You need to call `send` to send the request, or you can set `immediate = true` to send the request immediately.
7170

7271
```javascript
73-
const { data, eventSource, readyState, onMessage, onError, on, send, close } = useSSE(method, {
74-
// highlight-start
75-
immediate: true
76-
// highlight-end
77-
});
72+
const { data, eventSource, readyState, onMessage, onError, on, send, close } = useSSE(
73+
postMethodHandler,
74+
{
75+
// highlight-start
76+
immediate: true
77+
// highlight-end
78+
}
79+
);
7880
```
7981

8082
`useSSE` can only connect to one source at present. That is, when trying to connect to multiple targets, the previous connection will always be disconnected.
8183

8284
```javascript
83-
const { data, eventSource, readyState, onMessage, onError, on, send, close } = useSSE(method);
85+
const { data, eventSource, readyState, onMessage, onError, on, send, close } =
86+
useSSE(postMethodHandler);
8487

8588
send('value1');
8689
// highlight-start
@@ -118,7 +121,7 @@ When data is received, it will automatically be assigned to the state `data`. Yo
118121
<script setup>
119122
import { ref } from 'vue';
120123
121-
const { data, readyState, onMessage, close, send } = useSSE(method);
124+
const { data, readyState, onMessage, close, send } = useSSE(postMethodHandler);
122125
const dataList = ref([]);
123126
onMessage(({ data }) => {
124127
dataList.value.push(data);
@@ -133,7 +136,7 @@ When data is received, it will automatically be assigned to the state `data`. Yo
133136
import { useEffect, useState } from 'react';
134137
const App = () => {
135138
const [dataList, setDataList] = useState([]);
136-
const { data, readyState, onMessage, onError, close, send } = useSSE(method);
139+
const { data, readyState, onMessage, onError, close, send } = useSSE(postMethodHandler);
137140
onMessage(({ data }) => {
138141
setDataList(prevList => [...prevList, data]);
139142
});
@@ -161,7 +164,7 @@ const App = () => {
161164
```html
162165
<script>
163166
let dataList = [];
164-
const { data, readyState, onMessage, close, send } = useSSE(method);
167+
const { data, readyState, onMessage, close, send } = useSSE(postMethodHandler);
165168
166169
onMessage(({ data: newData }) => {
167170
dataList.push(newData);
@@ -192,7 +195,7 @@ import { createSignal } from 'solid-js';
192195

193196
const App = () => {
194197
const [dataList, setDataList] = createSignal([]);
195-
const { data, readyState, onMessage, onError, close, send } = useSSE(method);
198+
const { data, readyState, onMessage, onError, close, send } = useSSE(postMethodHandler);
196199

197200
onMessage(({ data }) => {
198201
setDataList(prevList => [...prevList, data]);
@@ -221,7 +224,7 @@ const App = () => {
221224
`useSSE` provides a series of binding event methods, and will return the unbinding function when binding.
222225

223226
```javascript
224-
const { onMessage, onError, close } = useSSE(method);
227+
const { onMessage, onError, close } = useSSE(postMethodHandler);
225228

226229
// Corresponding to the message event of eventsource
227230
const offMessage = onMessage(event => {
@@ -243,7 +246,7 @@ offError();
243246
In addition, you can also listen to custom EventSource events, which will call the `addEventListener` binding of EventSource.
244247

245248
```javascript
246-
const { on } = useSSE(method);
249+
const { on } = useSSE(postMethodHandler);
247250

248251
// The following code will listen for events with the field `event: update`
249252
const offUpdate = on('update', event => {
@@ -257,7 +260,7 @@ const offUpdate = on('update', event => {
257260
By default, response data is captured by the [global response interceptor](/tutorial/getting-started/basic/global-interceptor). If this is not the behavior you expect, you can turn it off manually.
258261

259262
```javascript
260-
const { data, readyState, onMessage, on } = useSSE(method, {
263+
const { data, readyState, onMessage, on } = useSSE(postMethodHandler, {
261264
// highlight-start
262265
interceptByGlobalResponded: false // Now dataWill not be intercepted by response
263266
// highlight-end

‎docs/tutorial/03-client/01-strategy/16-use-uploader.md‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -356,9 +356,7 @@ const file = {
356356
};
357357

358358
// Call appendFiles, if start is not passed, it will be appended to the end of the list by default
359-
const appendCount = await appendFiles({
360-
files: file
361-
});
359+
const appendCount = await appendFiles(file);
362360
```
363361

364362
#### Batch append file data in multiple formats
@@ -398,9 +396,23 @@ const canvasFile = {
398396
mimeType: 'image/png' // defaults to blob.type
399397
};
400398

401-
// Batch append, set multiple: true to allow more than 1 file
402-
const appendCount = await appendFiles({
403-
files: [base64File, blobFile, canvasFile]
399+
// Batch append files
400+
const appendCount = await appendFiles([base64File, blobFile, canvasFile]);
401+
```
402+
403+
#### Insert to the specified position
404+
405+
Insert the newly uploaded file into the second position of the list.
406+
407+
```javascript
408+
// Insert a CSV file
409+
const insertFile = {
410+
file: new File(['id,name\n1,John'], 'data.csv', { type: 'text/csv' })
411+
};
412+
413+
// Insert the file to position 2 (index starts at 0)
414+
const appendCount = await appendFiles(insertFile, {
415+
start: 2
404416
});
405417
```
406418

@@ -417,24 +429,10 @@ const appendCount = await appendFiles({
417429

418430
// Whether to allow multiple files to be selected, this parameter will be set to the multiple attribute of <input type="file">
419431
// See [https://developer.mozilla.org/docs/Web/HTML/Element/input/file#multiple]
420-
multiple: true
421-
});
422-
```
423-
424-
#### Insert to the specified position
425-
426-
Insert the newly uploaded file into the second position of the list.
427-
428-
```javascript
429-
// Insert a CSV file
430-
const insertFile = {
431-
file: new File(['id,name\n1,John'], 'data.csv', { type: 'text/csv' })
432-
};
432+
multiple: true,
433433

434-
// Insert the file to position 2 (index starts at 0)
435-
const appendCount = await appendFiles({
436-
files: insertFile,
437-
start: 2
434+
// Insert to the start of the list
435+
start: 0
438436
});
439437
```
440438

‎i18n/zh-CN/docusaurus-plugin-content-docs/current/tutorial/03-client/01-strategy/14-use-sse.md‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,10 @@ use hook
2525
```javascript
2626
import { useSSE } from 'alova/client';
2727

28-
const method = (value: string) => alova.Get('/api/source', { param: { key: value } });
28+
const postMethodHandler = (value: string) => alova.Post('/api/source', null, {
29+
headers: { 'Content-Type': 'application/json' },
30+
param: { key: value }
31+
});
2932
const {
3033
// 接收的数据，每次接收将会修改data
3134
data,
@@ -56,14 +59,10 @@ const {
5659

5760
// 原始的EventSource实例
5861
eventSource
59-
} = useSSE(method, {
60-
method: 'POST',
61-
headers: { 'Content-Type': 'application/json' },
62-
// ...fetch的其他参数
63-
64-
// 兼容3.3.0之前的版本，此参数设置为true时将会设置fetch的credentials为'include'
65-
withCredentials: true,
62+
} = useSSE(postMethodHandler, {
63+
credentials: 'include',
6664
initialData: 'initial-data' // 初始时 data 中的数据
65+
// ...fetch的其他参数
6766
});
6867
```
6968

@@ -72,17 +71,21 @@ const {
7271
默认情况下不会发送请求，你需要调用`send`来发送请求，也可以设置`immediate = true`立即发送请求。
7372

7473
```javascript
75-
const { data, eventSource, readyState, onMessage, onError, on, send, close } = useSSE(method, {
76-
// highlight-start
77-
immediate: true
78-
// highlight-end
79-
});
74+
const { data, eventSource, readyState, onMessage, onError, on, send, close } = useSSE(
75+
postMethodHandler,
76+
{
77+
// highlight-start
78+
immediate: true
79+
// highlight-end
80+
}
81+
);
8082
```
8183

8284
`useSSE` 目前只能连接到一个源。也就是说，当试图连接多个目标时，上一个连接总会被断开。
8385

8486
```javascript
85-
const { data, eventSource, readyState, onMessage, onError, on, send, close } = useSSE(method);
87+
const { data, eventSource, readyState, onMessage, onError, on, send, close } =
88+
useSSE(postMethodHandler);
8689

8790
send('value1');
8891
// highlight-start
@@ -120,7 +123,7 @@ send('value3'); // 这也会断开上一个连接
120123
<script setup>
121124
import { ref } from 'vue';
122125
123-
const { data, readyState, onMessage, close, send } = useSSE(method);
126+
const { data, readyState, onMessage, close, send } = useSSE(postMethodHandler);
124127
const dataList = ref([]);
125128
onMessage(({ data }) => {
126129
dataList.value.push(data);
@@ -136,7 +139,7 @@ import { useEffect, useState } from 'react';
136139

137140
const App = () => {
138141
const [dataList, setDataList] = useState([]);
139-
const { data, readyState, onMessage, onError, close, send } = useSSE(method);
142+
const { data, readyState, onMessage, onError, close, send } = useSSE(postMethodHandler);
140143

141144
onMessage(({ data }) => {
142145
setDataList(prevList => [...prevList, data]);
@@ -163,7 +166,7 @@ const App = () => {
163166
```html
164167
<script>
165168
let dataList = [];
166-
const { data, readyState, onMessage, close, send } = useSSE(method);
169+
const { data, readyState, onMessage, close, send } = useSSE(postMethodHandler);
167170
168171
onMessage(({ data: newData }) => {
169172
dataList.push(newData);
@@ -192,7 +195,7 @@ import { createSignal } from 'solid-js';
192195

193196
const App = () => {
194197
const [dataList, setDataList] = createSignal([]);
195-
const { data, readyState, onMessage, onError, close, send } = useSSE(method);
198+
const { data, readyState, onMessage, onError, close, send } = useSSE(postMethodHandler);
196199

197200
onMessage(({ data }) => {
198201
setDataList(prevList => [...prevList, data]);
@@ -219,7 +222,7 @@ const App = () => {
219222
`useSSE`提供了一系列的绑定事件方法，绑定时将返回解绑函数。
220223

221224
```javascript
222-
const { onMessage, onError, close } = useSSE(method);
225+
const { onMessage, onError, close } = useSSE(postMethodHandler);
223226

224227
// 对应 eventsource 的 message 事件
225228
const offMessage = onMessage(event => {
@@ -241,7 +244,7 @@ offError();
241244
除此以外，你还可以监听自定义的 EventSource 事件，它将调用 EventSource 的`addEventListener`绑定。
242245

243246
```javascript
244-
const { on } = useSSE(method);
247+
const { on } = useSSE(postMethodHandler);
245248

246249
// 以下代码将监听具有字段 `event: update` 的事件
247250
const offUpdate = on('update', event => {
@@ -255,7 +258,7 @@ const offUpdate = on('update', event => {
255258
默认情况下，响应数据受到[全局响应拦截器的捕获](/tutorial/getting-started/basic/global-interceptor)。如果这不是你预期的行为，可以手动关闭。
256259

257260
```javascript
258-
const { data, readyState, onMessage, on } = useSSE(method, {
261+
const { data, readyState, onMessage, on } = useSSE(postMethodHandler, {
259262
// highlight-start
260263
interceptByGlobalResponded: false // 现在数据不会被响应拦截
261264
// highlight-end

‎i18n/zh-CN/docusaurus-plugin-content-docs/current/tutorial/03-client/01-strategy/16-use-uploader.md‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -347,9 +347,7 @@ const file = {
347347
};
348348

349349
// 调用 appendFiles，不传 start 则默认追加到列表末尾
350-
const appendCount = await appendFiles({
351-
files: file
352-
});
350+
const appendCount = await appendFiles(file);
353351
```
354352

355353
#### 批量追加多种格式的文件数据
@@ -389,15 +387,29 @@ const canvasFile = {
389387
mimeType: 'image/png' // 默认为blob.type
390388
};
391389

392-
// 批量追加，设置 multiple: true 允许超过 1 个文件
393-
const appendCount = await appendFiles({
394-
files: [base64File, blobFile, canvasFile]
390+
// 批量追加文件
391+
const appendCount = await appendFiles([base64File, blobFile, canvasFile]);
392+
```
393+
394+
#### 插入到指定位置
395+
396+
将新上传的文件插入到列表的第 2 位。
397+
398+
```javascript
399+
// 插入一个 CSV 文件
400+
const insertFile = {
401+
file: new File(['id,name\n1,John'], 'data.csv', { type: 'text/csv' })
402+
};
403+
404+
// 插入文件到位置2（索引从 0 开始）
405+
const appendCount = await appendFiles(insertFile, {
406+
start: 2
395407
});
396408
```
397409

398410
#### 选择文件
399411

400-
当不传入文件数据时，默认将打开上传对话框选择文件。
412+
当第一个参数不传入文件数据时，默认将打开上传对话框选择文件。
401413

402414
```javascript
403415
// 通过 appendFiles 追加文件
@@ -408,24 +420,10 @@ const appendCount = await appendFiles({
408420

409421
// 是否允许选择多个文件，此参数将设置到<input type="file"> 的 multiple 属性
410422
// 具体查看[https://developer.mozilla.org/docs/Web/HTML/Element/input/file#multiple]
411-
multiple: true
412-
});
413-
```
414-
415-
#### 插入到指定位置
416-
417-
将新上传的文件插入到列表的第 2 位。
418-
419-
```javascript
420-
// 插入一个 CSV 文件
421-
const insertFile = {
422-
file: new File(['id,name\n1,John'], 'data.csv', { type: 'text/csv' })
423-
};
423+
multiple: true,
424424

425-
// 插入文件到位置2（索引从 0 开始）
426-
const appendCount = await appendFiles({
427-
files: insertFile,
428-
start: 2
425+
// 插入到列表开头
426+
start: 0
429427
});
430428
```
431429

0 commit comments

Comments
 (0)