From 1c0b64e2b2e5752924bcd62dcfce0516ebd655f6 Mon Sep 17 00:00:00 2001 From: kopijka <101661240+kopijka@users.noreply.github.com> Date: Sat, 13 May 2023 12:05:54 +0300 Subject: [PATCH 1/2] Update article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Переклад на українську мову 13,05,23 --- 5-network/01-fetch/article.md | 182 +++++++++++++++++----------------- 1 file changed, 91 insertions(+), 91 deletions(-) diff --git a/5-network/01-fetch/article.md b/5-network/01-fetch/article.md index 4669fc451..0528d6c2a 100644 --- a/5-network/01-fetch/article.md +++ b/5-network/01-fetch/article.md @@ -1,74 +1,74 @@ # Fetch -JavaScript can send network requests to the server and load new information whenever it's needed. +JavaScript може відправляти мережові запити на сервер та підвантажувати нову інформацію по мірі необхідності. -For example, we can use a network request to: +Наприклад, можна використовувати мережовий запит, щоб: -- Submit an order, -- Load user information, -- Receive latest updates from the server, -- ...etc. +- Відправляти замовлення, +- Завантажити інформацію про користувача, +- Отримати останні оновлення з сервера, +- ...і т.д. -...And all of that without reloading the page! +...І все це без перезавантаження сторінки! -There's an umbrella term "AJAX" (abbreviated Asynchronous JavaScript And XML) for network requests from JavaScript. We don't have to use XML though: the term comes from old times, that's why that word is there. You may have heard that term already. +Є загальний термін "AJAX" (абревіатура від Asynchronous JavaScript And XML) для мережевих запитів від JavaScript. Але не обов’язково використовувати XML: цей термін старий, тому це слово тут. Можливо, ви вже чули цей термін. -There are multiple ways to send a network request and get information from the server. +Є кілька способів надіслати мережевий запит і отримати інформацію з сервера. -The `fetch()` method is modern and versatile, so we'll start with it. It's not supported by old browsers (can be polyfilled), but very well supported among the modern ones. +Метод `fetch()` - сучасний та дуже потужний, через то буде почато з него. Він не підтримуєся старими (можна використовувати поліфіл), але підтримуєся всіма сучасними браузерами. -The basic syntax is: +Базовий синтаксис: ```js let promise = fetch(url, [options]) ``` -- **`url`** -- the URL to access. -- **`options`** -- optional parameters: method, headers etc. +- **`url`** -- URL для відправлення запиту. +- **`options`** -- додаткові параметри: метод, заголовки і т.д. -Without `options`, this is a simple GET request, downloading the contents of the `url`. +Без `options`, це просто GET запит, котрий скачує вміс за адресою `url`. -The browser starts the request right away and returns a promise that the calling code should use to get the result. +Браузер зразу починає запит та повертає проміс, котрий зовнішний код використовує для отримання результатів. -Getting a response is usually a two-stage process. +Процес отримання запиту зазвичай відбуваєся у два етапи. -**First, the `promise`, returned by `fetch`, resolves with an object of the built-in [Response](https://fetch.spec.whatwg.org/#response-class) class as soon as the server responds with headers.** +**По перше, `promise` виконуєся із об'єктом вбудованого класу [Response](https://fetch.spec.whatwg.org/#response-class) у якості результу, зразу коли сервер надішле заголовки відповіді.** -At this stage we can check HTTP status, to see whether it is successful or not, check headers, but don't have the body yet. +На цьому етапі можна перевірити статус HTTP-запиту, та визначити, чи виконався він успішно, а також переглянути заголовки, але покищо без тіла запиту. -The promise rejects if the `fetch` was unable to make HTTP-request, e.g. network problems, or there's no such site. Abnormal HTTP-statuses, such as 404 or 500 do not cause an error. +Проміс закінчуєся помилкою, якщо `fetch` не зміг виконати HTTP-запит, e.g. наприклад, під час помилки мережі або якщо такий сайт відсутний. HTTP-статуси 404 та 500 це не помилка. -We can see HTTP-status in response properties: +Можна побачити власний HTTP-статус у власних запитах: -- **`status`** -- HTTP status code, e.g. 200. -- **`ok`** -- boolean, `true` if the HTTP status code is 200-299. +- **`status`** -- код статуса HTTP-запиту , наприклад, 200. +- **`ok`** -- логічне значення, котре буде `true`, якщо код HTTP-статосу в діапазоні 200-299. -For example: +Наприклад: ```js let response = await fetch(url); -if (response.ok) { // if HTTP-status is 200-299 - // get the response body (the method explained below) +if (response.ok) { // якщо HTTP-статус у діапазоні 200-299 + // отримання тіла запиту (див. про цей метод нище) let json = await response.json(); } else { alert("HTTP-Error: " + response.status); } ``` -**Second, to get the response body, we need to use an additional method call.** +**По друге, для отримання тіла запиту, потрібно використовувати додатковий виклик методу.** -`Response` provides multiple promise-based methods to access the body in various formats: +`Response`представляє декілька методів, котрі грунтуются на промісах, для доступу до тіла запиту в різних форматах: -- **`response.text()`** -- read the response and return as text, -- **`response.json()`** -- parse the response as JSON, -- **`response.formData()`** -- return the response as `FormData` object (explained in the [next chapter](info:formdata)), -- **`response.blob()`** -- return the response as [Blob](info:blob) (binary data with type), -- **`response.arrayBuffer()`** -- return the response as [ArrayBuffer](info:arraybuffer-binary-arrays) (low-level representation of binary data), -- additionally, `response.body` is a [ReadableStream](https://streams.spec.whatwg.org/#rs-class) object, it allows you to read the body chunk-by-chunk, we'll see an example later. +- **`response.text()`** -- читає відповід та повертає, як звичайний текст, +- **`response.json()`** -- декодує відповідь у форматі JSON, +- **`response.formData()`** -- повертає відповідь, як `FormData` object (він буде розглянутий [у наптупному розділі](info:formdata)), +- **`response.blob()`** -- повертає об'єкт, як[Blob](info:blob) (бінарні дані з типом), +- **`response.arrayBuffer()`** -- повертає відповідь, як [ArrayBuffer](інформація: буфер масиву - бінарний масиви) (низькорівневе представлення двійкових даних), +- крім того, `response.body` це об'єкт [ReadableStream](https://streams.spec.whatwg.org/#rs-class) ,за допомогою котрого можна отримувати (зчитувати) тіло частинами. Такий приклад буде розглянуто трохи пізніше. -For instance, let's get a JSON-object with latest commits from GitHub: +Наприклад, буде отримано JSON-об'єкт з останніми комітами із ропозиторію GitHub: ```js run async let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits'; @@ -81,7 +81,7 @@ let commits = await response.json(); // read response body and parse as JSON alert(commits[0].author.login); ``` -Or, the same without `await`, using pure promises syntax: +Те саме буде отримано без `await`, із використанням промісів: ```js run fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits') @@ -89,7 +89,7 @@ fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commi .then(commits => alert(commits[0].author.login)); ``` -To get the response text, `await response.text()` instead of `.json()`: +Для отримання відповіді у вигляді тексту, використано `await response.text()` замість `.json()`: ```js run async let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits'); @@ -99,33 +99,33 @@ let text = await response.text(); // read response body as text alert(text.slice(0, 80) + '...'); ``` -As a show-case for reading in binary format, let's fetch and show a logo image of ["fetch" specification](https://fetch.spec.whatwg.org) (see chapter [Blob](info:blob) for details about operations on `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(); // download as Blob object +let blob = await response.blob(); // скачано, як Blob об'єкт */!* -// create for it +// створення для ного let img = document.createElement('img'); img.style = 'position:fixed;top:10px;left:10px;width:100px'; document.body.append(img); -// show it +// виведення на екран img.src = URL.createObjectURL(blob); -setTimeout(() => { // hide after three seconds +setTimeout(() => { // приховування через три секунди img.remove(); URL.revokeObjectURL(img.src); }, 3000); ``` -````warn -We can choose only one body-reading method. +````Важливо +Можна вибрати тільки один метод читання відповіді. -If we've already got the response with `response.text()`, then `response.json()` won't work, as the body content has already been processed. +Якщо, було отримано відповід із `response.text()`, тоді `response.json()` не зпрацює, бо дані вже були оброблені.. ```js let text = await response.text(); // response body consumed @@ -133,27 +133,27 @@ let parsed = await response.json(); // fails (already consumed) ``` ```` -## Response headers +## Заголовки запиту -The response headers are available in a Map-like headers object in `response.headers`. +Заоголовки запиту зберігаются у схожому на Map об'єкті `response.headers`. -It's not exactly a Map, but it has similar methods to get individual headers by name or iterate over them: +Це не зовсім `Map`, але можна використати такі самі методи, як із `Map`, щоб отримати заголовок за його назвою або перебрати заголовки у циклі: ```js run async let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits'); -// get one header +// отримання одного заголовку alert(response.headers.get('Content-Type')); // application/json; charset=utf-8 -// iterate over all headers +// перебір усіх заголовків for (let [key, value] of response.headers) { alert(`${key} = ${value}`); } ``` -## Request headers +## Заголовки запиту -To set a request header in `fetch`, we can use the `headers` option. It has an object with outgoing headers, like this: +Для встановлення заголовка запиту в `fetch`, можна використати опцію `headers` option. Вона містит об'єкт з вихідними заголовками, наприклад: ```js let response = fetch(protectedUrl, { @@ -163,7 +163,7 @@ let response = fetch(protectedUrl, { }); ``` -...But there's a list of [forbidden HTTP headers](https://fetch.spec.whatwg.org/#forbidden-header-name) that we can't set: +...Є список [заборонені заголовки HTTP](https://fetch.spec.whatwg.org/#forbidden-header-name), котрі не можна встановити: - `Accept-Charset`, `Accept-Encoding` - `Access-Control-Request-Headers` @@ -186,22 +186,22 @@ let response = fetch(protectedUrl, { - `Proxy-*` - `Sec-*` -These headers ensure proper and safe HTTP, so they are controlled exclusively by the browser. +Ці заголовки забезпечуют достовірність HTTP, через то вони контролюются тільки браузером. -## POST requests +## POST запити -To make a `POST` request, or a request with another method, we need to use `fetch` options: +Для відправлення `POST` запиту або запиту з іншим методом, треба використати `fetch` параметри: -- **`method`** -- HTTP-method, e.g. `POST`, -- **`body`** -- the request body, one of: - - a string (e.g. JSON-encoded), - - `FormData` object, to submit the data as `multipart/form-data`, - - `Blob`/`BufferSource` to send binary data, - - [URLSearchParams](info:url), to submit the data in `x-www-form-urlencoded` encoding, rarely used. +- **`method`** -- HTTP-метод, наприклад `POST`, +- **`body`** -- тіло запиту, одне із списку: + - рядок (наприклад, у форматі JSON), + - об'єкт `FormData`, для відправки даних як `multipart/form-data`, + - `Blob`/`BufferSource` для відправлення бінарних даних, + - [URLSearchParams](info:url), для відправлення даних у кодуванні `x-www-form-urlencoded`, використовуєся рідко. -The JSON format is used most of the time. +Частіше використовуєся JSON формат. -For example, this code submits `user` object as JSON: +Наприклад, цей код відправляє об'єкт `user` як JSON: ```js run async let user = { @@ -223,15 +223,15 @@ let result = await response.json(); alert(result.message); ``` -Please note, if the request `body` is a string, then `Content-Type` header is set to `text/plain;charset=UTF-8` by default. +Зауваження, що оскільки тіло запиту `body` - це рядок, то заголовок `Content-Type` по замовчуванню буде `text/plain;charset=UTF-8` . -But, as we're going to send JSON, we use `headers` option to send `application/json` instead, the correct `Content-Type` for JSON-encoded data. +Але, оскільки надіслано JSON, то використано парамет `headers` для відправлення замість цього `application/json`, правильний `Content-Type` для JSON формату. -## Sending an image +## Відправлення зображення -We can also submit binary data with `fetch` using `Blob` or `BufferSource` objects. +Можна відправити бінарні дані за допомогою `fetch`, використовуючи об'єкт `Blob` або `BufferSource`. -In this example, there's a `` where we can draw by moving a mouse over it. A click on the "submit" button sends the image to the server: +У прикладі нище, є елемент ``, на котрому можна малювати рух мишки. При натисканні на кнопку "відправити", то зображен буде відправлено на сервер: ```html run autorun height="90" @@ -253,7 +253,7 @@ In this example, there's a `` where we can draw by moving a mouse over i body: blob }); - // the server responds with confirmation and the image size + // сервер відповідає підтвердженням та розміром зображення let result = await response.json(); alert(result.message); } @@ -262,9 +262,9 @@ In this example, there's a `` where we can draw by moving a mouse over i ``` -Please note, here we don't set `Content-Type` header manually, because a `Blob` object has a built-in type (here `image/png`, as generated by `toBlob`). For `Blob` objects that type becomes the value of `Content-Type`. +Зауваження, тут не потрібно вручну встановлювати заголовок `Content-Type`, бо об'єкт `Blob` вбудований тип (тут `image/png`, котрий заданий у `toBlob`). Під час відправлення об'єктів `Blob`, він автоматично стає значенням `Content-Type`. -The `submit()` function can be rewritten without `async/await` like this: +Функція `submit()` може бути переписана без `async/await`, наприклад наступним чином: ```js function submit() { @@ -279,16 +279,16 @@ function submit() { } ``` -## Summary +## Підсумок -A typical fetch request consists of two `await` calls: +Типовий запит за домогою `fetch` складаєся із двох операторів `await`: ```js -let response = await fetch(url, options); // resolves with response headers -let result = await response.json(); // read body as json +let response = await fetch(url, options); // завершення із заголовками відповіді +let result = await response.json(); // читання тіла у форматі json ``` -Or, without `await`: +Або без `await`: ```js fetch(url, options) @@ -296,21 +296,21 @@ fetch(url, options) .then(result => /* process result */) ``` -Response properties: -- `response.status` -- HTTP code of the response, -- `response.ok` -- `true` if the status is 200-299. -- `response.headers` -- Map-like object with HTTP headers. +Параметри відповіді: +- `response.status` -- HTTP код відповід, +- `response.ok` -- `true`, якщо статус відповіді у діапазоні 200-299. +- `response.headers` -- схожий на `Map`об'єкт із HTTP заголовками. -Methods to get response body: -- **`response.text()`** -- return the response as text, -- **`response.json()`** -- parse the response as JSON object, -- **`response.formData()`** -- return the response as `FormData` object (`multipart/form-data` encoding, see the next chapter), -- **`response.blob()`** -- return the response as [Blob](info:blob) (binary data with type), -- **`response.arrayBuffer()`** -- return the response as [ArrayBuffer](info:arraybuffer-binary-arrays) (low-level binary data), +Методи для отримання тіла відповіді: +- **`response.text()`** -- повертає відповід, як звичайний текст, +- **`response.json()`** -- декодує відповідь у форматі JSON, +- **`response.formData()`** -- повертає відповідь як об'єкт `FormData` (кодування `multipart/form-data`, див. у наступному розділі), +- **`response.blob()`** -- повертає об'єкт як [Blob](info:blob) (бінарні дані з типом), +- **`response.arrayBuffer()`** -- повертає відповідь як [ArrayBuffer](info:arraybuffer-binary-arrays) (низько рівневі бінарні дані), -Fetch options so far: -- `method` -- HTTP-method, -- `headers` -- an object with request headers (not any header is allowed), -- `body` -- the data to send (request body) as `string`, `FormData`, `BufferSource`, `Blob` or `UrlSearchParams` object. +Опції `fetch`, котрі на даний момент вивчено: +- `method` -- HTTP-метод, +- `headers` -- об'єкт із запитуваними заголовками (не всі заголовки дозволені), +- `body` -- дані для відправлення (тіло запиту) у вигляді тексту `string`, `FormData`, `BufferSource`, `Blob` або `UrlSearchParams` об'єкт. -In the next chapters we'll see more options and use cases of `fetch`. +У наступних розділах буде розглянуто більше параметрів та варіантів використання `fetch`. From b7ab07c71041ae05aad560bc558d9e9c7e3b42c2 Mon Sep 17 00:00:00 2001 From: Stanislav Date: Fri, 2 Jun 2023 14:33:29 +0300 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: SuperMaxusa <41739128+SuperMaxusa@users.noreply.github.com> --- 5-network/01-fetch/article.md | 76 +++++++++++++++++------------------ 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/5-network/01-fetch/article.md b/5-network/01-fetch/article.md index 0528d6c2a..5d127763e 100644 --- a/5-network/01-fetch/article.md +++ b/5-network/01-fetch/article.md @@ -1,9 +1,9 @@ # Fetch -JavaScript може відправляти мережові запити на сервер та підвантажувати нову інформацію по мірі необхідності. +JavaScript може відправляти мережеві запити на сервер та підвантажувати нову інформацію за потребою. -Наприклад, можна використовувати мережовий запит, щоб: +Наприклад, можна використовувати мережевий запит, щоб: - Відправляти замовлення, - Завантажити інформацію про користувача, @@ -12,11 +12,11 @@ JavaScript може відправляти мережові запити на с ...І все це без перезавантаження сторінки! -Є загальний термін "AJAX" (абревіатура від Asynchronous JavaScript And XML) для мережевих запитів від JavaScript. Але не обов’язково використовувати XML: цей термін старий, тому це слово тут. Можливо, ви вже чули цей термін. +Є загальний термін "AJAX" (абревіатура від Asynchronous JavaScript And XML) для мережевих запитів від 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 об'єкт */!* -// створення для ного +// створення для нього 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); ``` -Зауваження, тут не потрібно вручну встановлювати заголовок `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`. pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy