Apply suggestions from code review

Co-authored-by: SuperMaxusa <[email protected]>

Author: dolgachio

5-network/01-fetch/article.md

@@ -1,9 +1,9 @@
 
 # Fetch
 
-JavaScript може відправляти мережові запити на сервер та підвантажувати нову інформацію по мірі необхідності.
+JavaScript може відправляти мережеві запити на сервер та підвантажувати нову інформацію за потребою.
 
-Наприклад, можна використовувати мережовий запит, щоб:
+Наприклад, можна використовувати мережевий запит, щоб:
 
 - Відправляти замовлення,
 - Завантажити інформацію про користувача,
@@ -12,11 +12,11 @@ JavaScript може відправляти мережові запити на с
 
 ...І все це без перезавантаження сторінки!
 
-Є загальний термін "AJAX" (абревіатура від <b>A</b>synchronous <b>J</b>avaScript <b>A</b>nd <b>X</b>ML) для мережевих запитів від JavaScript. Але не обов’язково використовувати XML: цей термін старий, тому це слово тут. Можливо, ви вже чули цей термін.
+Є загальний термін "AJAX" (абревіатура від <b>A</b>synchronous <b>J</b>avaScript <b>A</b>nd <b>X</b>ML) для мережевих запитів від JavaScript коду. Але формат XML використовувати не обов’язково: цей термін застарілий, тому це слово (XML) тут. Можливо, ви вже його десь чули.
 
 Є кілька способів надіслати мережевий запит і отримати інформацію з сервера.
 
-Метод `fetch()` - сучасний та дуже потужний, через то буде почато з него. Він не підтримуєся старими (можна використовувати поліфіл), але підтримуєся всіма сучасними браузерами.
+Метод `fetch()` -- сучасний та дуже потужний, тому почнемо з нього. Він не підтримується старими (можна використовувати поліфіл), але підтримується всіма сучасними браузерами.
 
 Базовий синтаксис:
 
@@ -27,21 +27,21 @@ let promise = fetch(url, [options])
 - **`url`** -- URL для відправлення запиту.
 - **`options`** -- додаткові параметри: метод, заголовки і т.д.
 
-Без `options`, це просто GET запит, котрий скачує вміс за адресою `url`.
+Без `options`, це просто GET запит, який завантажує зміст за адресою `url`.
 
-Браузер зразу починає запит та повертає проміс, котрий зовнішний код використовує для отримання результатів.
+Браузер одразу починає робити запит та повертає проміс, який зовнішний код використовує для отримання результату.
 
-Процес отримання запиту зазвичай відбуваєся у два етапи.
+Процес отримання запиту зазвичай відбувається у два етапи.
 
-**По перше, `promise` виконуєся із об'єктом вбудованого класу [Response](https://fetch.spec.whatwg.org/#response-class) у якості результу, зразу коли сервер надішле заголовки відповіді.**
+**По-перше, `promise` завершиться із об'єктом вбудованого класу [Response](https://fetch.spec.whatwg.org/#response-class) у якості результату, одразу коли сервер надішле заголовки відповіді.**
 
 На цьому етапі можна перевірити статус HTTP-запиту, та визначити, чи виконався він успішно, а також переглянути заголовки, але покищо без тіла запиту.
 
-Проміс закінчуєся помилкою, якщо `fetch` не зміг виконати HTTP-запит, e.g. наприклад, під час помилки мережі або якщо такий сайт відсутний. HTTP-статуси 404 та 500 це не помилка.
+Проміс закінчується помилкою, якщо `fetch` не зміг виконати HTTP-запит, наприклад, через помилку мережі або, якщо такого сайту не існує. Ненормальні HTTP-статуси, як 404 та 500, не викликатимуть помилку.
 
-Можна побачити власний HTTP-статус у власних запитах:
+Ми можемо побачити HTTP-статус у властивостях відповіді:
 
-- **`status`** -- код статуса HTTP-запиту , наприклад, 200.
+- **`status`** -- код статуса HTTP-запиту, наприклад, 200.
 - **`ok`** -- логічне значення, котре буде `true`, якщо код HTTP-статосу в діапазоні 200-299.
 
 Наприклад:
@@ -50,7 +50,7 @@ let promise = fetch(url, [options])
 let response = await fetch(url);
 
 if (response.ok) { // якщо HTTP-статус у діапазоні 200-299
-  // отримання тіла запиту (див. про цей метод нище)
+  // отримання тіла запиту (див. про цей метод нижче)
   let json = await response.json();
 } else {
   alert("HTTP-Error: " + response.status);
@@ -59,16 +59,16 @@ if (response.ok) { // якщо HTTP-статус у діапазоні 200-299
 
 **По друге, для отримання тіла запиту, потрібно використовувати додатковий виклик методу.**
 
-`Response`представляє декілька методів, котрі грунтуются на промісах, для доступу до тіла запиту в різних форматах:
+`Response` надає декілька методів, які повертають проміс, для доступу до тіла запиту в різних форматах:
 
 - **`response.text()`** -- читає відповід та повертає, як звичайний текст,
 - **`response.json()`** -- декодує відповідь у форматі JSON,
-- **`response.formData()`** -- повертає відповідь, як `FormData` object (він буде розглянутий [у наптупному розділі](info:formdata)),
-- **`response.blob()`** -- повертає об'єкт, як[Blob](info:blob) (бінарні дані з типом),
+- **`response.formData()`** -- повертає відповідь, як об'єкт `FormData` (він буде розглянутий [у наступному розділі](info:formdata)),
+- **`response.blob()`** -- повертає відповідь, як [Blob](info:blob) (бінарні дані з типом),
 - **`response.arrayBuffer()`** -- повертає відповідь, як [ArrayBuffer](інформація: буфер масиву - бінарний масиви) (низькорівневе представлення двійкових даних),
-- крім того, `response.body` це об'єкт [ReadableStream](https://streams.spec.whatwg.org/#rs-class) ,за допомогою котрого можна отримувати (зчитувати) тіло частинами. Такий приклад буде розглянуто трохи пізніше.
+- крім того, `response.body` це об'єкт [ReadableStream](https://streams.spec.whatwg.org/#rs-class), за допомогою якого можна отримувати (зчитувати) тіло відповіді частинами. Такий приклад буде розглянуто трохи пізніше.
 
-Наприклад, буде отримано JSON-об'єкт з останніми комітами із ропозиторію GitHub:
+Наприклад, буде отримано JSON-об'єкт з останніми комітами із репозиторію GitHub:
 
 ```js run async
 let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
@@ -99,16 +99,16 @@ let text = await response.text(); // read response body as text
 alert(text.slice(0, 80) + '...');
 ```
 
-Для прикладу роботи із бінарними даними, буде зроблено запит та виведено на екран логотип [специфікації "fetch"](https://fetch.spec.whatwg.org) (див. розділ [Blob](info:blob), дізнатися про операції із `Blob`):
+Для прикладу роботи із бінарними даними, буде зроблено запит та виведено на екран логотип [специфікації "fetch"](https://fetch.spec.whatwg.org) (див. розділ [Blob](info:blob), щоб дізнатись детальніше про операції із `Blob`):
 
 ```js async run
 let response = await fetch('/article/fetch/logo-fetch.svg');
 
 *!*
-let blob = await response.blob(); // скачано, як Blob об'єкт
+let blob = await response.blob(); // скачати, як Blob об'єкт
 */!*
 
-// створення <img> для ного
+// створення <img> для нього
 let img = document.createElement('img');
 img.style = 'position:fixed;top:10px;left:10px;width:100px';
 document.body.append(img);
@@ -125,19 +125,19 @@ setTimeout(() => { // приховування через три секунди
 ````Важливо
 Можна вибрати тільки один метод читання відповіді.
 
-Якщо, було отримано відповід із `response.text()`, тоді `response.json()` не зпрацює, бо дані вже були оброблені..
+Якщо, було отримано відповід із `response.text()`, тоді `response.json()` не спрацює, бо дані вже були оброблені..
 
 ```js
-let text = await response.text(); // response body consumed
-let parsed = await response.json(); // fails (already consumed)
+let text = await response.text(); // читаємо тіло відповіді
+let parsed = await response.json(); // завершується помилкою, бо дані вже прочитані
 ```
 ````
 
-## Заголовки запиту
+## Заголовки відповіді
 
-Заоголовки запиту зберігаются у схожому на  Map об'єкті `response.headers`.
+Заоголовки відповіді зберігаются у схожому на Map об'єкті `response.headers`.
 
-Це не зовсім `Map`, але можна використати такі самі методи, як із `Map`, щоб отримати заголовок за його назвою або перебрати заголовки у циклі:
+Це не зовсім `Map`, але можна використовувати такі самі методи, щоб отримати заголовок за його назвою або перебрати заголовки у циклі:
 
 ```js run async
 let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
@@ -153,7 +153,7 @@ for (let [key, value] of response.headers) {
 
 ## Заголовки запиту
 
-Для встановлення заголовка запиту в `fetch`, можна використати опцію `headers` option. Вона містит об'єкт з вихідними заголовками, наприклад:
+Для встановлення заголовка запиту в `fetch`, можна використати властивість `headers` в об'єкті `options`. Вона містит об'єкт з вихідними заголовками, наприклад:
 
 ```js
 let response = fetch(protectedUrl, {
@@ -163,7 +163,7 @@ let response = fetch(protectedUrl, {
 });
 ```
 
-...Є список [заборонені заголовки HTTP](https://fetch.spec.whatwg.org/#forbidden-header-name), котрі не можна встановити:
+...Але існує список [заборонених HTTP заголовків](https://fetch.spec.whatwg.org/#forbidden-header-name), які не можна встановити:
 
 - `Accept-Charset`, `Accept-Encoding`
 - `Access-Control-Request-Headers`
@@ -186,14 +186,14 @@ let response = fetch(protectedUrl, {
 - `Proxy-*`
 - `Sec-*`
 
-Ці заголовки забезпечуют достовірність HTTP, через то вони контролюются тільки браузером.
+Ці заголовки забезпечуют достовірність HTTP, через це вони контролюются і встановлюються лише браузером.
 
 ## POST запити
 
 Для відправлення `POST` запиту або запиту з іншим методом, треба використати `fetch` параметри:
 
 - **`method`** -- HTTP-метод, наприклад `POST`,
-- **`body`** -- тіло запиту, одне із списку:
+- **`body`** -- тіло запиту, щось одне із списку:
   - рядок (наприклад, у форматі JSON),
   - об'єкт `FormData`, для відправки даних як `multipart/form-data`,
   - `Blob`/`BufferSource` для відправлення бінарних даних,
@@ -223,9 +223,9 @@ let result = await response.json();
 alert(result.message);
 ```
 
-Зауваження, що оскільки тіло запиту `body` - це рядок, то заголовок `Content-Type` по замовчуванню буде `text/plain;charset=UTF-8` .
+Зверніть увагу, якщо тіло запиту `body` -- рядок, то заголовок `Content-Type` типово буде `text/plain;charset=UTF-8` .
 
-Але, оскільки надіслано JSON, то використано парамет `headers` для відправлення замість цього `application/json`, правильний `Content-Type` для JSON формату.
+Але, оскільки ми надсилаємо дані у форматі JSON, то через `headers` ми маємо встановити значення `application/json` -- правильний `Content-Type` для JSON формату.
 
 ## Відправлення зображення
 
@@ -262,7 +262,7 @@ alert(result.message);
 </body>
 ```
 
-Зауваження, тут не потрібно вручну встановлювати заголовок `Content-Type`, бо об'єкт `Blob` вбудований тип (тут `image/png`, котрий заданий у `toBlob`). Під час відправлення об'єктів `Blob`, він автоматично стає значенням `Content-Type`.
+Зауваження, тут не потрібно вручну встановлювати заголовок `Content-Type`, бо об'єкт `Blob` вбудований тип (буде використано `image/png`, заданий через `toBlob`). Під час відправлення об'єктів `Blob`, він автоматично стає значенням `Content-Type`.
 
 Функція `submit()` може бути переписана без `async/await`, наприклад наступним чином:
 
@@ -279,9 +279,9 @@ function submit() {
 }
 ```
 
-## Підсумок
+## Підсумки
 
-Типовий запит за домогою `fetch` складаєся із двох операторів `await`:
+Типовий запит за допомогою `fetch` складаєся із двох операторів `await`:
 
 ```js
 let response = await fetch(url, options); // завершення із заголовками відповіді
@@ -297,7 +297,7 @@ fetch(url, options)
 ```
 
 Параметри відповіді:
-- `response.status` -- HTTP код відповід,
+- `response.status` -- HTTP-статус відповіді,
 - `response.ok` -- `true`, якщо статус відповіді у діапазоні 200-299.
 - `response.headers` -- схожий на `Map`об'єкт із HTTP заголовками.
 
@@ -308,9 +308,9 @@ fetch(url, options)
 - **`response.blob()`** -- повертає об'єкт як [Blob](info:blob) (бінарні дані з типом),
 - **`response.arrayBuffer()`** -- повертає відповідь як [ArrayBuffer](info:arraybuffer-binary-arrays) (низько рівневі бінарні дані),
 
-Опції `fetch`, котрі на даний момент вивчено:
+Опції `fetch`, які ми розглянули:
 - `method` -- HTTP-метод,
-- `headers` -- об'єкт із запитуваними заголовками (не всі заголовки дозволені),
+- `headers` -- об'єкт із заголовками запиту (не всі заголовки дозволені),
 - `body` -- дані для відправлення (тіло запиту) у вигляді тексту `string`, `FormData`, `BufferSource`, `Blob` або `UrlSearchParams` об'єкт.
 
 У наступних розділах буде розглянуто більше параметрів та варіантів використання `fetch`.