Skip to content

Commit 6968a76

Browse files
authored
review changes
1 parent 66a6393 commit 6968a76

1 file changed

Lines changed: 13 additions & 13 deletions

File tree

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ const reader = response.body.getReader();
1515

1616
// бесконечный цикл, пока идет загрузка
1717
while(true) {
18-
// done становится true в последнем отрезке
19-
// value - Uint8Array из байтов каждого отрезка
18+
// done становится true в последнем фрагменте
19+
// value - Uint8Array из байтов каждого фрагменте
2020
const {done, value} = await reader.read();
2121

2222
if (done) {
@@ -27,28 +27,28 @@ while(true) {
2727
}
2828
```
2929

30-
Таким образом, цикл идёт, пока `await reader.read()` возвращает в ответе данные в виде отрезков.
30+
Таким образом, цикл идёт, пока `await reader.read()` возвращает в ответе данные в виде кусков.
3131

32-
У отрезка (англ. `chunk`) есть два свойства:
32+
У возвращаемого фрагмента (англ. `chunk`) есть два свойства:
3333
- **`done`** -- `true`, когда чтение закончено.
3434
- **`value`** -- типизированный массив байтов: `Uint8Array`.
3535

36-
Чтобы пошагово отследить процесс, нам нужно всего лишь посчитать отрезки.
36+
Чтобы пошагово отследить процесс, нам нужно всего лишь посчитать фрагменты.
3737

38-
Вот полный код, где в процессе получения ответа от сервера мы фиксируем каждый отрезок, а далее - подробные объяснения.
38+
Вот полный код, где в процессе получения ответа от сервера мы фиксируем, сколько данных пришло от каждой порции.
3939

4040
```js run async
4141
// Шаг 1: начинаем обработку с помощью fetch и достаём ссылку на поток для чтения
4242
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits?per_page=100');
4343

4444
const reader = response.body.getReader();
4545

46-
// Step 2: получаем длину контента
46+
// Шаг 2: получаем длину контента
4747
const contentLength = +response.headers.get('Content-Length');
4848

49-
// Step 3: считываем данные:
49+
// Шаг 3: считываем данные:
5050
let receivedLength = 0; // длину на данный момент
51-
let chunks = []; // массив полученных двоичных отрезков (в нём будет тело ответа)
51+
let chunks = []; // массив полученных двоичных фрагментов (в нём будет тело ответа)
5252
while(true) {
5353
const {done, value} = await reader.read();
5454

@@ -62,7 +62,7 @@ while(true) {
6262
console.log(`Получено ${receivedLength} из ${contentLength}`)
6363
}
6464

65-
// Шаг 4: соединим отрезки в общий типизированный массив Uint8Array
65+
// Шаг 4: соединим фрагменты в общий типизированный массив Uint8Array
6666
let chunksAll = new Uint8Array(receivedLength); // (4.1)
6767
let position = 0;
6868
for(let chunk of chunks) {
@@ -89,9 +89,9 @@ alert(commits[0].author.login);
8989
3. Вызываем `await reader.read()` до окончания загрузки.
9090

9191
Всё, что получили, мы складываем по "кусочкам" в массив. Это важно, потому что после того, как ответ получен, мы уже не сможем "перечитать" его, используя `response.json()` или любой другой способ (попробуйте - будет ошибка).
92-
4. В самом конце у нас типизированный массив, состоящий из отрезков -- `Uint8Array`. Нам нужно как-то их склеить, чтобы получить строку. К сожалению, для этого нет единого способа, поэтому можно сделать, например, так:
92+
4. В самом конце у нас типизированный массив -- `Uint8Array`. В нем каждый фрагмент данных уже превратился в 8-битные целые беззнаковые значения. Нам нужно как-то их склеить, чтобы получить строку. К сожалению, для этого нет единого способа, поэтому можно сделать, например, так:
9393
1. Создаём `new Uint8Array(receivedLength)` -- массив того же типа заданной длины.
94-
2. Используем `.set(chunk, position)` метод для копирования каждого отрезка друг за другом в массив рузельтатов.
94+
2. Используем `.set(chunk, position)` метод для копирования каждого фрагмента друг за другом в массив результатов.
9595
5. Наш результат теперь хранится в `chunksAll`. Это не строка, а байтовый массив.
9696

9797
Чтобы получить именно строку, надо декодировать байты. Встроенный метод [TextDecoder](info:text-decoder) как раз этим и занимается. Потом мы можем распарсить её с помощью `JSON.parse`.
@@ -101,4 +101,4 @@ alert(commits[0].author.login);
101101
let blob = new Blob(chunks);
102102
```
103103

104-
На всякий случай повторимся, что всё вышеописанное ни в коем случае (пока что) не относится к отправке данных, только к их загрузке.
104+
На всякий случай повторимся, что всё вышеописанное ни в коем случае (пока что) не относится к отправке данных, только к их загрузке.

0 commit comments

Comments
 (0)