Skip to content

Commit df1f007

Browse files
committed
remove extra lines
1 parent 03ab818 commit df1f007

1 file changed

Lines changed: 14 additions & 22 deletions

File tree

5-network/03-fetch-progress/article.md

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,9 @@ while(true) {
2929
}
3030
```
3131

32-
نتیجه‌ی فراخوانی `await reader.read()` یک شیء با دو ویژگی است:
33-
34-
* ویژگی **`done`** -- زمانی `true` می‌شود که خواندن کامل شده باشد، در غیر این صورت `false` است.
35-
* ویژگی **`value`** -- یک آرایه تایپ‌شده از بایت‌ها: `Uint8Array`.
32+
نتیجه‌ی فراخوانی `await reader.read()` یک شیء با دو ویژگی است:
33+
- ویژگی **`done`** -- زمانی `true` می‌شود که خواندن کامل شده باشد، در غیر این صورت `false` است.
34+
- ویژگی **`value`** -- یک آرایه تایپ‌شده از بایت‌ها: `Uint8Array`.
3635

3736
```smart
3837
توجه: Streams API همچنین پیمایش ناهمزمان (`async iteration`) روی `ReadableStream` را با حلقه‌ی `for await..of` تعریف می‌کند، اما هنوز به طور گسترده پشتیبانی نمی‌شود (به [مشکلات مرورگرها](https://github.com/whatwg/streams/issues/778#issuecomment-461341033) مراجعه کنید)، بنابراین از حلقه‌ی `while` استفاده می‌کنیم.
@@ -54,9 +53,8 @@ const reader = response.body.getReader();
5453
const contentLength = +response.headers.get('Content-Length');
5554

5655
// مرحله 3: خواندن داده
57-
let receivedLength = 0; // تا این لحظه این مقدار بایت دریافت شده
58-
let chunks = []; // آرایه‌ای از تکه‌های باینری دریافت‌شده (بدنه)
59-
56+
let receivedLength = 0; // تا این لحظه این مقدار بایت دریافت شده
57+
let chunks = []; // آرایه‌ای از تکه‌های باینری دریافت‌شده (بدنه)
6058
while(true) {
6159
const {done, value} = await reader.read();
6260

@@ -74,8 +72,8 @@ while(true) {
7472
let chunksAll = new Uint8Array(receivedLength); // (مرحله 4.1)
7573
let position = 0;
7674
for(let chunk of chunks) {
77-
chunksAll.set(chunk, position); // (مرحله 4.2)
78-
position += chunk.length;
75+
chunksAll.set(chunk, position); // (مرحله 4.2)
76+
position += chunk.length;
7977
}
8078

8179
// مرحله 5: تبدیل به رشته
@@ -90,33 +88,27 @@ alert(commits[0].author.login);
9088

9189
1. ما مانند حالت عادی `fetch` انجام می‌دهیم، اما به جای `response.json()`، یک stream reader می‌گیریم: `response.body.getReader()`.
9290

93-
توجه کنید که نمی‌توان هم‌زمان از هر دو روش برای خواندن یک پاسخ استفاده کرد: یا باید از reader استفاده کنیم یا از متدهای آماده‌ی response.
94-
91+
توجه کنید که نمی‌توان هم‌زمان از هر دو روش برای خواندن یک پاسخ استفاده کرد: یا باید از reader استفاده کنیم یا از متدهای آماده‌ی response.
9592
2. قبل از خواندن، می‌توانیم از هدر `Content-Length` طول کل پاسخ را به دست آوریم.
9693

9794
این مقدار ممکن است در درخواست‌های cross-origin وجود نداشته باشد (به فصل <info:fetch-crossorigin> مراجعه کنید) و در عمل هم سرور مجبور به ارسال آن نیست. اما معمولاً وجود دارد.
98-
9995
3. تابع `await reader.read()` را تا زمانی که تمام شود اجرا می‌کنیم.
10096

10197
ما تکه‌های پاسخ را در آرایه‌ی `chunks` جمع می‌کنیم. این مهم است چون بعد از مصرف شدن پاسخ، دیگر نمی‌توان آن را دوباره با `response.json()` یا روش‌های مشابه خواند (اگر امتحان کنید خطا خواهید گرفت).
102-
10398
4. در پایان، ما `chunks` را داریم -- آرایه‌ای از قطعات بایت `Uint8Array`. باید آن‌ها را به یک خروجی واحد تبدیل کنیم. متأسفانه متد مستقیمی برای اتصال آن‌ها وجود ندارد، بنابراین این کار را دستی انجام می‌دهیم:
104-
105-
1. یک `Uint8Array` جدید با طول کل ایجاد می‌کنیم: `chunksAll = new Uint8Array(receivedLength)`
106-
2. سپس با `.set(chunk, position)` هر قطعه را پشت سر هم داخل آن کپی می‌کنیم.
107-
99+
1. یک `Uint8Array` جدید با طول کل ایجاد می‌کنیم: `chunksAll = new Uint8Array(receivedLength)`
100+
2. سپس با `.set(chunk, position)` هر قطعه را پشت سر هم داخل آن کپی می‌کنیم.
108101
5. در نهایت داده‌ی نهایی در `chunksAll` قرار دارد، اما هنوز رشته نیست.
109102

110103
برای تبدیل به رشته، باید این بایت‌ها را تفسیر کنیم. کلاس داخلی [TextDecoder](info:text-decoder) دقیقاً همین کار را انجام می‌دهد. سپس در صورت نیاز می‌توانیم آن را با `JSON.parse` تبدیل کنیم.
111104

112105
اگر به جای رشته داده‌ی باینری بخواهیم، کار ساده‌تر است: کافی است مراحل 4 و 5 را با یک خط جایگزین کنیم:
113-
114-
```js
115-
let blob = new Blob(chunks);
116-
```
106+
```js
107+
let blob = new Blob(chunks);
108+
```
117109

118110
در نهایت ما نتیجه را (به صورت رشته یا Blob) داریم و هم‌زمان در طول فرایند، پیشرفت دانلود را هم دنبال می‌کنیم.
119111

120112
دوباره توجه کنید: این روش برای *پیشرفت آپلود* نیست (فعلاً با `fetch` ممکن نیست)، فقط برای *پیشرفت دانلود* است.
121113

122-
همچنین اگر اندازه‌ی داده مشخص نباشد، باید در حلقه مقدار `receivedLength` را بررسی کنیم و اگر از یک حدی بیشتر شد، حلقه را متوقف کنیم تا آرایه‌ی `chunks` باعث مصرف بیش از حد حافظه نشود.
114+
همچنین اگر اندازه‌ی داده مشخص نباشد، باید در حلقه مقدار `receivedLength` را بررسی کنیم و اگر از یک حدی بیشتر شد، حلقه را متوقف کنیم تا آرایه‌ی `chunks` باعث مصرف بیش از حد حافظه نشود.

0 commit comments

Comments
 (0)